From e64ebe6106e58fad510960fb1c71aed7b5818a14 Mon Sep 17 00:00:00 2001
From: "antonio.bergas" <anthonyprincedom@hotmail.com>
Date: Thu, 18 May 2023 11:28:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(pluginsFilter):=20refinement?=
 =?UTF-8?q?=20of=20hide=20&&=20dropdown=20behaviours?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: antonio.bergas <anthonyprincedom@hotmail.com>
---
 .../pluginsFilter/pluginsFilter.tsx           |  2 +-
 microsite/src/pages/plugins/index.tsx         | 80 +++++++++++--------
 .../src/pages/plugins/plugins.module.scss     |  4 +
 3 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/microsite/src/components/pluginsFilter/pluginsFilter.tsx b/microsite/src/components/pluginsFilter/pluginsFilter.tsx
index 19b80b9f14..25c8a5ff52 100644
--- a/microsite/src/components/pluginsFilter/pluginsFilter.tsx
+++ b/microsite/src/components/pluginsFilter/pluginsFilter.tsx
@@ -15,7 +15,7 @@ const PluginsFilter = ({ categories, handleChipClick }: Props) => {
       <ul className="dropdown__menu">
         {categories.map(chip => {
           return (
-            <li key={chip.name}>
+            <li key={chip.name} onClick={() => handleChipClick(chip.name)}>
               <div className="dropdown__item">
                 <input
                   type="checkbox"
diff --git a/microsite/src/pages/plugins/index.tsx b/microsite/src/pages/plugins/index.tsx
index 6b1116712a..b1c9601110 100644
--- a/microsite/src/pages/plugins/index.tsx
+++ b/microsite/src/pages/plugins/index.tsx
@@ -43,8 +43,8 @@ const Plugins = () => {
   const [categories, setCategories] =
     useState<ChipCategory[]>(allCategoriesArray);
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-  const [showCoreFeaturesHeader, setShowCoreFeaturesHeader] = useState(true);
-  const [showOtherPluginsHeader, setShowOtherPluginsHeader] = useState(true);
+  const [showCoreFeatures, setShowCoreFeatures] = useState(true);
+  const [showOtherPlugins, setShowOtherPlugins] = useState(true);
 
   const handleChipClick = (categoryName: string) => {
     const isSelected =
@@ -67,23 +67,23 @@ const Plugins = () => {
     setCategories(newCategories);
 
     if (!newSelectedCategories.includes('Core Feature')) {
-      setShowCoreFeaturesHeader(false);
+      setShowCoreFeatures(false);
     } else {
-      setShowCoreFeaturesHeader(true);
+      setShowCoreFeatures(true);
     }
 
     if (
       newSelectedCategories.length === 1 &&
       newSelectedCategories[0] === 'Core Feature'
     ) {
-      setShowOtherPluginsHeader(false);
+      setShowOtherPlugins(false);
     } else {
-      setShowOtherPluginsHeader(true);
+      setShowOtherPlugins(true);
     }
 
     if (newSelectedCategories.length === 0) {
-      setShowOtherPluginsHeader(true);
-      setShowCoreFeaturesHeader(true);
+      setShowOtherPlugins(true);
+      setShowCoreFeatures(true);
     }
   };
 
@@ -118,33 +118,45 @@ const Plugins = () => {
           />
         </div>
 
-        {showCoreFeaturesHeader && <h2>Core Features</h2>}
+        {showCoreFeatures && (
+          <div>
+            <h2>Core Features</h2>
+            <div className="pluginsContainer margin-bottom--lg">
+              {plugins.corePlugins
+                .filter(
+                  pluginData =>
+                    !selectedCategories.length ||
+                    selectedCategories.includes(pluginData.category),
+                )
+                .map(pluginData => (
+                  <PluginCard
+                    key={pluginData.title}
+                    {...pluginData}
+                  ></PluginCard>
+                ))}
+            </div>
+          </div>
+        )}
 
-        <div className="pluginsContainer margin-bottom--lg">
-          {plugins.corePlugins
-            .filter(
-              pluginData =>
-                !selectedCategories.length ||
-                selectedCategories.includes(pluginData.category),
-            )
-            .map(pluginData => (
-              <PluginCard key={pluginData.title} {...pluginData}></PluginCard>
-            ))}
-        </div>
-
-        {showOtherPluginsHeader && <h2>All Plugins</h2>}
-
-        <div className="pluginsContainer margin-bottom--lg">
-          {plugins.otherPlugins
-            .filter(
-              pluginData =>
-                !selectedCategories.length ||
-                selectedCategories.includes(pluginData.category),
-            )
-            .map(pluginData => (
-              <PluginCard key={pluginData.title} {...pluginData}></PluginCard>
-            ))}
-        </div>
+        {showOtherPlugins && (
+          <div>
+            <h2>All Plugins</h2>
+            <div className="pluginsContainer margin-bottom--lg">
+              {plugins.otherPlugins
+                .filter(
+                  pluginData =>
+                    !selectedCategories.length ||
+                    selectedCategories.includes(pluginData.category),
+                )
+                .map(pluginData => (
+                  <PluginCard
+                    key={pluginData.title}
+                    {...pluginData}
+                  ></PluginCard>
+                ))}
+            </div>
+          </div>
+        )}
       </div>
     </Layout>
   );
diff --git a/microsite/src/pages/plugins/plugins.module.scss b/microsite/src/pages/plugins/plugins.module.scss
index 3babf0959c..d5ea5de6e7 100644
--- a/microsite/src/pages/plugins/plugins.module.scss
+++ b/microsite/src/pages/plugins/plugins.module.scss
@@ -37,6 +37,10 @@
     }
   }
 
+  :global(.hidePluginsHeader) {
+    display: none;
+  }
+
   :global(.fit-content) {
     width: fit-content;
   }