From bb9e20ca9b68890852baae4f7a06c35db6136286 Mon Sep 17 00:00:00 2001
From: ichim-david <ichim.david@gmail.com>
Date: Wed, 16 Aug 2023 16:54:35 +0300
Subject: [PATCH] change(accordion): use real icons for active and inactive
 panel icons #380 from eea/accordion-filtering

---
 src/ui/Accordion/Accordion.stories.js        | 23 +++++-----
 theme/themes/eea/modules/accordion.overrides | 44 ++++++++------------
 theme/themes/eea/modules/accordion.variables |  2 -
 3 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/ui/Accordion/Accordion.stories.js b/src/ui/Accordion/Accordion.stories.js
index 6ccc517384..8ba511c125 100644
--- a/src/ui/Accordion/Accordion.stories.js
+++ b/src/ui/Accordion/Accordion.stories.js
@@ -62,14 +62,6 @@ function AccordionContainer({ ...args }) {
         {args.enable_filtering && (
           <Accordion className={args.variant}>
             <Accordion.Title className={'filter'}>
-              {filterValue === '' ? (
-                <Icon className="ri-filter-3-line" />
-              ) : (
-                <Icon
-                  className="ri-close-line"
-                  onClick={() => handleFilteredValueChange('')}
-                />
-              )}
               <Input
                 fluid
                 className="input-accordion-title"
@@ -78,6 +70,10 @@ function AccordionContainer({ ...args }) {
                 value={filterValue}
                 onChange={(e) => handleFilteredValueChange(e.target.value)}
               />
+              <Icon
+                className={filterValue ? 'ri-close-line' : 'ri-filter-3-line'}
+                onClick={() => handleFilteredValueChange('')}
+              />
             </Accordion.Title>
           </Accordion>
         )}
@@ -90,12 +86,13 @@ function AccordionContainer({ ...args }) {
                 panel.title?.toLowerCase().includes(filterValue.toLowerCase())),
           )
           .map((panel, index) => {
+            const active = activeIndex === index;
             return (
               <Accordion className={args.variant} key={index}>
                 <Accordion.Title
                   index={index}
                   tabIndex={0}
-                  active={activeIndex === index}
+                  active={active}
                   onClick={handleClick}
                   as={args.title_size === 'no value' ? '' : args.title_size}
                   onKeyDown={(e) => {
@@ -105,9 +102,13 @@ function AccordionContainer({ ...args }) {
                   }}
                 >
                   <span>{panel.title}</span>
-                  <Icon className="ri-arrow-down-s-line" />
+                  <Icon
+                    className={
+                      active ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'
+                    }
+                  />
                 </Accordion.Title>
-                <Accordion.Content active={activeIndex === index}>
+                <Accordion.Content active={active}>
                   {panel.content}
                 </Accordion.Content>
               </Accordion>
diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
index b0b51dcdca..4f1d6127bf 100644
--- a/theme/themes/eea/modules/accordion.overrides
+++ b/theme/themes/eea/modules/accordion.overrides
@@ -4,11 +4,8 @@
 
 .accordion .filter {
   background-color: var(--bg-color, transparent);
-  --accordion-icon-inactive: '\ed25';
-  .ri-close-line {
-    --accordion-icon-inactive: '\eb99';
-  }
 }
+
 .ui.accordion button.title {
   background: transparent;
   width: 100%;
@@ -19,8 +16,18 @@
   margin: @itemsMargin;
   transition: @styledTitleTransition;
 
-  .title,
-  button.title {
+  .basic {
+    color: @titleColorHover !important;
+  }
+
+  .basic:focus,
+  .basic:hover {
+    background-color: transparent !important;
+    box-shadow: none;
+    color: @titleColorHover !important;
+  }
+
+  .title {
     display: flex;
     align-items: center;
     justify-content: @titleJustifyContent;
@@ -30,7 +37,7 @@
       justify-content: flex-start;
     }
 
-    i {
+    .icon {
       flex-shrink: 0;
     }
 
@@ -38,12 +45,12 @@
     &:focus-visible {
       color: @titleColorHover;
 
-      i {
+      .icon {
         color: @iconColorHover;
       }
     }
 
-    i {
+    .icon {
       display: flex;
       width: @iconWidth;
       height: @iconHeight;
@@ -54,17 +61,6 @@
       font-size: @iconFontSize;
       line-height: @iconFontSize;
 
-      &:before {
-        content: @iconInactive;
-        font-size: @iconFontSize;
-      }
-    }
-
-    &.filter {
-      i:before {
-        width: @filterIconWidth;
-        font-size: @filterIconFontSize;
-      }
     }
   }
 
@@ -73,12 +69,8 @@
     background-color: @activeTitleBackground;
     color: @activeTitleColor;
 
-    i {
+    .icon {
       color: @iconColorActive;
-
-      &:before {
-        content: @iconActive;
-      }
     }
   }
 
@@ -120,7 +112,7 @@
     background-color: transparent;
   }
 
-  .ui.item i {
+  .ui.item .icon {
     font-size: @iconFontSize;
 
     &::before {
diff --git a/theme/themes/eea/modules/accordion.variables b/theme/themes/eea/modules/accordion.variables
index 0b0feb414f..41b64e7a4f 100644
--- a/theme/themes/eea/modules/accordion.variables
+++ b/theme/themes/eea/modules/accordion.variables
@@ -33,8 +33,6 @@
 @iconVerticalAlign: baseline;
 @iconTransform: none;
 @iconColorHover: @titleColorHover;
-@iconInactive: var(--accordion-icon-inactive, "\ea4e"); // Icon of closed accordion
-@iconActive: var(--accordion-icon-active, "\ea78") ; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
 @filterIconWidth: 3rem;
 @filterIconFontSize: 2rem;