Fix advanced facet toggle not working in Search block. (#882)

Co-authored-by: Dante Álvarez <89805481+danalvrz@users.noreply.github.com>

Author: iFlameing

frontend/packages/volto-light-theme/news/+advancedFacetToggle.bugfix

@@ -0,0 +1 @@
+Fix advanced facet toggle not working in Search block. @iFlameing

frontend/packages/volto-light-theme/src/components/Blocks/Search/TopSideFacets.jsx

@@ -45,10 +45,24 @@ const TopSideFacets = (props) => {
   const isLive = !showSearchButton;
   const intl = useIntl();
 
-  const FacetWrapper = ({ children }) => {
+  const FacetWrapper = ({ children, facetSettings = {}, visible }) => {
+    const { advanced, field = {} } = facetSettings;
     const colWidth = data.facets.length < 5 ? 12 / data.facets.length : 4;
+    const className = [
+      'facet',
+      field.value ? `facet-index-${field.value}` : '',
+      advanced ? 'advanced-facet' : '',
+      !visible ? 'advanced-facet-hidden' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
     return (
-      <Grid.Column mobile={12} tablet={colWidth} computer={colWidth}>
+      <Grid.Column
+        mobile={12}
+        tablet={colWidth}
+        computer={colWidth}
+        className={className}
+      >
         {children}
       </Grid.Column>
     );

frontend/packages/volto-light-theme/src/theme/_bgcolor-blocks-layout.scss

@@ -796,6 +796,21 @@
           color: var(--theme-low-contrast-foreground-color);
         }
 
+        .toggle-advanced-facets button {
+          border: 1px solid var(--theme-foreground-color);
+          border-color: var(--theme-foreground-color);
+          border-radius: unset;
+          background-color: var(--theme-color);
+
+          color: var(--theme-foreground-color);
+
+          &:hover {
+            border-color: var(--theme-foreground-color);
+            background-color: var(--theme-foreground-color);
+            color: var(--theme-color);
+          }
+        }
+
         .react-select-container {
           .react-select__menu {
             background-color: var(--theme-high-contrast-color);