datastake-daf 0.6.169 → 0.6.171

package/dist/components/index.js

@@ -9859,7 +9859,8 @@ const SelectFilters = _ref => {
     apiUrl,
     t = s => s,
     language = 'en',
-    type = 'default'
+    type = 'default',
+    isHeader = false
   } = _ref;
   const [filters, setFilters] = React.useState(selectedFilters || {});
   const [initFilters, setInitFilters] = React.useState(selectedFilters || {});
@@ -9926,7 +9927,7 @@ const SelectFilters = _ref => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname([className, 'daf-select-filters', type]),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: formatClassname(['filters', entries.length === 0 && 'empty']),
+      className: formatClassname(['filters', entries.length === 0 && 'empty', isHeader && 'px-0 pt-1']),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "filters-cont",
         children: entries.filter(_ref4 => {
@@ -9934,17 +9935,10 @@ const SelectFilters = _ref => {
           return !(typeof v.show === 'function' ? v.show(filters) : false);
         }).map((_ref5, i) => {
           let [k, v] = _ref5;
-          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
             style: v.style,
             className: "cont",
-            children: [/*#__PURE__*/jsxRuntime.jsx("label", {
-              children: typeof v.label === 'function' ? v.label({
-                filters,
-                options,
-                t,
-                language
-              }) : t(v.label)
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               children: [v.type === 'select' && options[k] && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
                 children: /*#__PURE__*/jsxRuntime.jsx(CustomSelect$1, {
                   config: v,
@@ -9983,7 +9977,7 @@ const SelectFilters = _ref => {
                   onChange: e => onChange(e.target.value, k)
                 })
               })]
-            })]
+            })
           }, i.toString());
         })
       }), showFilters && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -12398,25 +12392,29 @@ function Loading(_ref) {
 const {
   Paragraph
 } = antd.Typography;
-const useHeader = ({
-  title = '',
-  tooltip = '',
-  supportText = '',
-  tags = [],
-  actionButtons: _actionButtons = [],
-  titleTooltip,
-  className,
-  addedHeader = null,
-  addedHeaderFirst,
-  extraButtons: _extraButtons = [],
-  onDownload,
-  downloadDisabled,
-  goBackTo,
-  loading,
-  renderExtraComponents,
-  app = '',
-  isViewMode = false
-}) => {
+const useHeader = _ref => {
+  let {
+    title = '',
+    tooltip = '',
+    supportText = '',
+    tags = [],
+    actionButtons: _actionButtons = [],
+    titleTooltip,
+    className,
+    addedHeader = null,
+    addedHeaderFirst,
+    extraButtons: _extraButtons = [],
+    onDownload,
+    downloadDisabled,
+    goBackTo,
+    loading,
+    renderExtraComponents,
+    app = '',
+    isViewMode = false,
+    filtersConfig = {}
+  } = _ref;
+  const [showFilters, setShowFilters] = React.useState(false);
+  const hasFilters = !!filtersConfig;
   const downloadButtonAction = app && app === 'sbg' && isViewMode ? null : {
     onClick: onDownload,
     disabled: downloadDisabled,
@@ -12436,15 +12434,24 @@ const useHeader = ({
     noMinWidth: true,
     className: 'download-btn'
   };
-  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, downloadButton] : _actionButtons;
+  const filterButton = [{
+    icon: 'Filter',
+    key: 'filters',
+    noMinWidth: true,
+    squareIconButton: true,
+    onClick: () => {
+      setShowFilters(p => !p);
+    }
+  }];
+  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, ...(hasFilters ? filterButton : []), downloadButton] : _actionButtons;
   const extraButtons = onDownload && _actionButtons.length >= 3 ? [..._extraButtons, downloadButtonAction] : _extraButtons;
   const mainCont = React.useRef();
   const buttonCont = React.useRef();
   const [mainContWidth, setMainContWidth] = React.useState(600);
   const [buttonContWidth, setButtonContWidth] = React.useState(0);
-  const hasSupportText = !!supportText?.length;
-  const hasTags = !!tags?.length;
-  const hasButtons = !!(actionButtons?.length || extraButtons?.length);
+  const hasSupportText = !!(supportText !== null && supportText !== void 0 && supportText.length);
+  const hasTags = !!(tags !== null && tags !== void 0 && tags.length);
+  const hasButtons = !!(actionButtons !== null && actionButtons !== void 0 && actionButtons.length || extraButtons !== null && extraButtons !== void 0 && extraButtons.length);
   React.useEffect(() => {
     const mainContObserver = new ResizeObserver(entries => {
       const _mainEntry = entries[0];
@@ -12476,99 +12483,120 @@ const useHeader = ({
   }, []);
   const maxWidth = React.useMemo(() => mainContWidth - buttonContWidth - 24, [mainContWidth, buttonContWidth]);
   const renderMainCont = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: formatClassname(["main-cont flex", className]),
-    ref: mainCont,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 flex flex-column justify-content-center",
-      children: [typeof title === "string" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: formatClassname(["title flex", hasSupportText && "mb-1"]),
-        style: {
-          maxWidth,
-          alignItems: "center"
-        },
-        children: [goBackTo && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          className: "flex mr-xs no-min-width",
-          onClick: () => goBackTo(),
+      className: formatClassname(["main-cont flex", className]),
+      ref: mainCont,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-1 flex flex-column justify-content-center",
+        children: [typeof title === "string" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: formatClassname(["title flex", hasSupportText && "mb-1"]),
           style: {
-            padding: 2,
-            height: "25px",
-            minWidth: "25px",
-            borderRadius: "4px",
-            opacity: loading ? 0 : 1
+            maxWidth,
+            alignItems: "center"
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-            name: "Right",
+          children: [goBackTo && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            className: "flex mr-xs no-min-width",
+            onClick: () => goBackTo(),
+            style: {
+              padding: 2,
+              height: "25px",
+              minWidth: "25px",
+              borderRadius: "4px",
+              opacity: loading ? 0 : 1
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              name: "Right",
+              style: {
+                transform: "rotate(180deg)",
+                width: "12px",
+                color: "var(--base-gray-70)"
+              }
+            })
+          }), loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
+            active: true,
+            title: false,
+            paragraph: {
+              rows: 1
+            },
             style: {
-              transform: "rotate(180deg)",
-              width: "12px",
-              color: "var(--base-gray-70)"
+              marginTop: '10px'
             }
-          })
-        }), loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
-          active: true,
-          title: false,
-          paragraph: {
-            rows: 1
-          },
-          style: {
-            marginTop: '10px'
-          }
-        }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: titleTooltip || title,
-          children: /*#__PURE__*/jsxRuntime.jsx("h2", {
-            className: formatClassname(["mb-0 mr-1", hasButtons && "limited"]),
-            children: title
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex",
-          children: [!!tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex flex-column justify-content-center",
-            children: typeof tooltip === "string" ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-              title: tooltip,
-              children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
-            }) : typeof tooltip === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
-              rootClassName: formatClassname(["header-tooltip", tooltip.className]),
-              title: tooltip.title,
-              content: tooltip.content,
-              children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
-            }) : null
-          }), typeof renderExtraComponents === "function" ? renderExtraComponents() : null, hasTags && /*#__PURE__*/jsxRuntime.jsx(Tags, {
-            tags: tags
+          }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: titleTooltip || title,
+            children: /*#__PURE__*/jsxRuntime.jsx("h2", {
+              className: formatClassname(["mb-0 mr-1", hasButtons && "limited"]),
+              children: title
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex",
+            children: [!!tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-column justify-content-center",
+              children: typeof tooltip === "string" ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+                title: tooltip,
+                children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
+              }) : typeof tooltip === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+                rootClassName: formatClassname(["header-tooltip", tooltip.className]),
+                title: tooltip.title,
+                content: tooltip.content,
+                children: /*#__PURE__*/jsxRuntime.jsx(Icons.InfoCircleOutlined, {})
+              }) : null
+            }), typeof renderExtraComponents === "function" ? renderExtraComponents() : null, hasTags && /*#__PURE__*/jsxRuntime.jsx(Tags, {
+              tags: tags
+            })]
           })]
-        })]
-      }) : typeof title === "function" ? title(maxWidth) : title, /*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          marginLeft: goBackTo ? "33px" : 0
-        },
-        className: "support-text",
-        children: /*#__PURE__*/jsxRuntime.jsx(Paragraph, {
-          ellipsis: {
-            tooltip: supportText,
-            rows: 1
-          },
+        }) : typeof title === "function" ? title(maxWidth) : title, /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
-            maxWidth: maxWidth
+            marginLeft: goBackTo ? "33px" : 0
           },
-          children: supportText
-        })
-      })]
-    }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex gap-2",
-      children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: buttonCont,
-        children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-          extraButtons: extraButtons,
-          actionButtons: actionButtons
-        })
+          className: "support-text",
+          children: /*#__PURE__*/jsxRuntime.jsx(Paragraph, {
+            ellipsis: {
+              tooltip: supportText,
+              rows: 1
+            },
+            style: {
+              maxWidth: maxWidth
+            },
+            children: supportText
+          })
+        })]
+      }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: buttonCont,
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: buttonCont,
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        }), addedHeader]
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: buttonCont,
-        children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-          extraButtons: extraButtons,
-          actionButtons: actionButtons
-        })
-      }), addedHeader]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        marginLeft: goBackTo ? "33px" : 0,
+        width: '100%'
+      },
+      children: hasFilters && /*#__PURE__*/jsxRuntime.jsx(SelectFilters, {
+        t: filtersConfig.t,
+        apiUrl: filtersConfig.apiUrl,
+        showFilters: showFilters,
+        onApply: filtersConfig.onApply,
+        options: filtersConfig.options,
+        setShowFilters: setShowFilters,
+        language: filtersConfig.language,
+        type: filtersConfig.type,
+        filtersConfig: filtersConfig.filtersConfig,
+        selectedFilters: filtersConfig.selectedFilters,
+        className: filtersConfig.className,
+        isHeader: true
+      })
     })]
   });
   return {
@@ -12692,7 +12720,8 @@ function DAFHeader(_ref) {
     loading,
     renderExtraComponents,
     app = "",
-    isViewMode = false
+    isViewMode = false,
+    filtersConfig = {}
   } = _ref;
   const showBreadcrumbs = !!breadcrumbs.length;
   const {
@@ -12714,7 +12743,8 @@ function DAFHeader(_ref) {
     loading,
     renderExtraComponents,
     app,
-    isViewMode
+    isViewMode,
+    filtersConfig
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "daf-header",
@@ -12735,7 +12765,8 @@ DAFHeader.propTypes = {
   tags: PropTypes__default["default"].any,
   actionButtons: PropTypes__default["default"].array,
   extraButtons: PropTypes__default["default"].array,
-  downloadDisabled: PropTypes__default["default"].any
+  downloadDisabled: PropTypes__default["default"].any,
+  filtersConfig: PropTypes__default["default"].any
 };
 
 const _excluded$m = ["tabs", "onChange", "value", "className"];
@@ -18244,12 +18275,6 @@ function Filters({
             })
           })]
         });
-      // case "slider":
-      //   return (
-      //     <div className="form-row">
-      //       <label>{filter.label}</label>
-      //     </div>
-      //   );
       default:
         return null;
     }
@@ -20481,18 +20506,15 @@ const SDGList = dt.ul`
     justify-content: center;
     background: var(--base-gray-30);
     color: var(--base-gray-90);
-    border-radius: 8px;
-    border: 1px solid var(--base-gray-30);
   }
 `;
 
 const GAP_BETWEEN_SDGS = 4;
-function SDGIcons(_ref) {
-  let {
-    sdgList = [],
-    t = str => str,
-    iconSize = 24
-  } = _ref;
+function SDGIcons({
+  sdgList = [],
+  t = str => str,
+  iconSize = 24
+}) {
   const containerRef = React__default["default"].useRef(null);
   const [width, setWidth] = React__default["default"].useState(0);
   React__default["default"].useEffect(() => {
@@ -20533,10 +20555,10 @@ function SDGIcons(_ref) {
       children: [visibleSdgs.map((sdg, index) => /*#__PURE__*/jsxRuntime.jsx("li", {
         className: "project-widget-item",
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-          title: t("SDGS::".concat(sdg)),
+          title: t(`SDGS::${sdg}`),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
-              backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")"),
+              backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
               height: iconSize,
               width: iconSize
             },
@@ -20555,25 +20577,21 @@ function SDGIcons(_ref) {
               maxWidth: 200
             },
             children: sdgList.slice(visibleSdgs.length).map((sdg, idx) => /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-              title: t("SDGS::".concat(sdg)),
+              title: t(`SDGS::${sdg}`),
               children: /*#__PURE__*/jsxRuntime.jsx("div", {
                 style: {
                   width: iconSize,
                   height: iconSize,
-                  backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")"),
+                  backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
                   backgroundSize: "cover",
                   borderRadius: 4
                 },
-                title: t("SDGS::".concat(sdg))
+                title: t(`SDGS::${sdg}`)
               })
             }, idx))
           }),
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "sdg-item-image sdg-item-more",
-            style: {
-              height: iconSize,
-              width: iconSize
-            },
             children: ["+", hiddenCount]
           })
         })
@@ -60236,7 +60254,6 @@ exports.ProjectVisualisationSelect = CustomSelect;
 exports.ProjectWidget = ProjectWidget;
 exports.RadarChart = RadarChart;
 exports.RadialBarChart = RadialBarChart;
-exports.SDGIcons = SDGIcons;
 exports.SDGWidget = SDGWidget;
 exports.SearchFilters = SearchFilters;
 exports.Segment = Segment;

package/dist/utils/index.js

@@ -4946,6 +4946,48 @@ dt.div`
   }
 `;
 
+({
+  value: PropTypes__default["default"].object,
+  filterSelectOptions: PropTypes__default["default"].func,
+  placeholder: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
+  options: PropTypes__default["default"].any,
+  i: PropTypes__default["default"].number,
+  k: PropTypes__default["default"].string,
+  filters: PropTypes__default["default"].object,
+  config: PropTypes__default["default"].object
+});
+
+({
+  t: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
+});
+
+({
+  config: PropTypes__default["default"].object,
+  filters: PropTypes__default["default"].object,
+  k: PropTypes__default["default"].string,
+  setValue: PropTypes__default["default"].func,
+  isEdit: PropTypes__default["default"].bool,
+  placeholder: PropTypes__default["default"].string
+});
+
+({
+  t: PropTypes__default["default"].func,
+  onApply: PropTypes__default["default"].func,
+  options: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  showFilters: PropTypes__default["default"].bool,
+  setShowFilters: PropTypes__default["default"].func,
+  filtersConfig: PropTypes__default["default"].object,
+  selectedFilters: PropTypes__default["default"].object,
+  language: PropTypes__default["default"].string,
+  apiUrl: PropTypes__default["default"].string
+});
+
 ({
   tabs: PropTypes__default["default"].array,
   onChange: PropTypes__default["default"].func,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.169",
+	"version": "0.6.171",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Filters/FloatingFilters/index.js

@@ -4,48 +4,42 @@ import { Fragment, useState } from "react";
 import Style from "./style.js";
 
 export default function Filters({ t, filtersConfig, onFilterChange }) {
-  const [opened, setOpened] = useState(false);
+	const [opened, setOpened] = useState(false);
 
-  const renderFilter = (filter) => {
-    switch (filter.type) {
-      case "select":
-        return (
-          <div className="form-row">
-            <label>{filter.label}</label>
-            <Select
-              allowClear
-              placeholder={filter.placeholder}
-              value={filter.value}
-              options={filter.options}
-              onChange={(c) => onFilterChange({ [filter.key]: c })}
-            />
-          </div>
-        );
-      // case "slider":
-      //   return (
-      //     <div className="form-row">
-      //       <label>{filter.label}</label>
-      //     </div>
-      //   );
-      default:
-        return null;
-    }
-  };
+	const renderFilter = (filter) => {
+		switch (filter.type) {
+			case "select":
+				return (
+					<div className="form-row">
+						<label>{filter.label}</label>
+						<Select
+							allowClear
+							placeholder={filter.placeholder}
+							value={filter.value}
+							options={filter.options}
+							onChange={(c) => onFilterChange({ [filter.key]: c })}
+						/>
+					</div>
+				);
+			default:
+				return null;
+		}
+	};
 
-  return (
-    <Style>
-      <Button onClick={() => setOpened((p) => !p)}>
-        {t("Filter")}
-        <CustomIcon width={16} height={16} name="Filter" />
-      </Button>
+	return (
+		<Style>
+			<Button onClick={() => setOpened((p) => !p)}>
+				{t("Filter")}
+				<CustomIcon width={16} height={16} name="Filter" />
+			</Button>
 
-      {opened ? (
-        <div className="filters">
-          {filtersConfig?.map((filter) => (
-            <Fragment key={filter.key}>{renderFilter(filter)}</Fragment>
-          ))}
-        </div>
-      ) : null}
-    </Style>
-  );
+			{opened ? (
+				<div className="filters">
+					{filtersConfig?.map((filter) => (
+						<Fragment key={filter.key}>{renderFilter(filter)}</Fragment>
+					))}
+				</div>
+			) : null}
+		</Style>
+	);
 }

package/src/@daf/core/components/Filters/selectFilters/index.jsx

@@ -21,6 +21,7 @@ const SelectFilters = ({
   t = (s) => s,
   language = 'en',
   type = 'default',
+  isHeader = false,
 }) => {
   const [filters, setFilters] = useState(selectedFilters || {});
   const [initFilters, setInitFilters] = useState(selectedFilters || {})
@@ -101,17 +102,17 @@ const SelectFilters = ({
 
   return (
     <div className={formatClassname([className, 'daf-select-filters', type])}>
-      <div className={formatClassname(['filters', entries.length === 0 && 'empty'])}>
+      <div className={formatClassname(['filters', entries.length === 0 && 'empty', isHeader && 'px-0 pt-1'])}>
         <div className="filters-cont">
           {entries.filter(([, v]) => !(typeof v.show === 'function' ? v.show(filters) : false)).map(([k, v], i) => (
             <div key={i.toString()} style={v.style} className="cont">
-              <label>
+              {/* <label>
                 {
                   typeof v.label === 'function' ?
                     v.label({ filters, options, t, language })
                     : t(v.label)
                 }
-              </label>
+              </label> */}
               <div>
                 {(v.type === 'select' && options[k]) && (
                   <>

package/src/@daf/core/components/Header/Header.stories.js

@@ -97,3 +97,120 @@ export const Primary = {
 		addedHeaderFirst: true,
 	},
 };
+
+export const WithFilters = {
+	name: "Filters Header",
+	args: {
+		breadcrumbs: [
+			{
+				label: "Level 1",
+				onClick: () => {
+					alert(1);
+				},
+			},
+			{
+				label: "Level Level 2",
+				onClick: () => {
+					alert(2);
+				},
+			},
+			{
+				label: "Level Level Level 3",
+				onClick: () => {
+					alert(3);
+				},
+			},
+			{
+				label: "Level Level Level Level 4",
+				onClick: () => {
+					alert(4);
+				},
+			},
+			{
+				label: "Level Level Level Level Level 5",
+				onClick: () => {
+					alert(5);
+				},
+			},
+			{
+				label: "Level Level Level Level Level Level 6",
+				onClick: () => {
+					alert(6);
+				},
+			},
+		],
+		title: "GGGGGGGGGGGGGGGGGGG",
+		// supportText:
+		// 	"Supporting text (explanation, DS ID, etc..)Supporting text (explanation, DS ID, etc..)",
+		// tags: [
+		// 	{ color: "green", label: "Tag 1" },
+		// 	{ color: "green", label: "Tag 2" },
+		// 	{ color: "green", label: "Tag 3" },
+		// 	{ color: "green", label: "Tag 4" },
+		// 	{ color: "green", label: "Tag 5" },
+		// ],
+		loading: false,
+		// actionButtons: [
+		// 	{
+		// 		// label: "Primary",
+		// 		type: "primary",
+		// 		onClick: () => {},
+		// 		icon: "Edit",
+		// 		noMinWidth: true,
+		// 	},
+			// { onClick: () => {}, icon: "Edit", noMinWidth: true },
+		// ],
+		// extraButtons: [{ label: "Extra", onClick: () => {} }],
+		// goBackTo: () => {
+		// 	alert("Go back to this location");
+		// },
+		// renderExtraComponents: () => (
+		// 	<div
+		// 		style={{
+		// 			width: "100px",
+		// 			marginLeft: 30,
+		// 		}}
+		// 	>
+		// 		Extra
+		// 	</div>
+		// ),
+		addedHeader: "Added Header",
+		addedHeaderFirst: true,
+		filtersConfig: {
+			"language": "en",
+			"filtersConfig": {
+				"country": {
+					"type": "select",
+					"label": "Country",
+					"style": {
+						"flex": 1
+					},
+					"labelStyle": {
+						"flex": 1
+					},
+					"isMulti": true
+				}
+			},
+			"options": {
+				"country": [
+					{
+						"label": "Peru",
+						"value": "PE"
+					},
+					{
+						"label": "Colombia",
+						"value": "CO"
+					}
+				]
+			},
+			"selectedFilters": {
+				"country": [
+					"PE",
+					"CO"
+				]
+			},
+			"type": "small",
+			onApply: () => {}
+		}
+	},
+};

package/src/@daf/core/components/Header/hook.js

@@ -7,6 +7,7 @@ import { formatClassname } from '../../../../helpers/ClassesHelper'
 import CustomIcon from '../Icon/CustomIcon.jsx'
 import Loading from '../Loading/index.jsx'
 import { truncateString } from '../../../../helpers/StringHelper.js'
+import SelectFilters from '../Filters/selectFilters/index.jsx'
 
 const { Paragraph } = Typography
 
@@ -28,7 +29,10 @@ export const useHeader = ({
   renderExtraComponents,
   app = '',
   isViewMode = false,
+  filtersConfig = {},
 }) => {
+  const [showFilters, setShowFilters] = useState(false)
+  const hasFilters = !!filtersConfig
   const downloadButtonAction = app && app === 'sbg' && isViewMode ? null : {
     onClick: onDownload,
     disabled: downloadDisabled,
@@ -44,9 +48,20 @@ export const useHeader = ({
     noMinWidth: true,
     className: 'download-btn',
   }
+
+  const filterButton = [{
+    icon: 'Filter',
+    key: 'filters',
+    noMinWidth: true,
+    squareIconButton: true,
+    onClick: () => {
+      setShowFilters((p) => !p)
+    }
+  }]
   
   const actionButtons = onDownload && _actionButtons.length < 3 ? [
     ..._actionButtons,
+    ...(hasFilters ? filterButton : []),
     downloadButton
   ] : _actionButtons;
 
@@ -103,87 +118,107 @@ export const useHeader = ({
     mainContWidth - buttonContWidth - 24, [mainContWidth, buttonContWidth])
 
   const renderMainCont = () => (
-    <div className={formatClassname(["main-cont flex", className])} ref={mainCont}>
-      <div className="flex-1 flex flex-column justify-content-center">
-        {typeof title === "string" ? (
-          <div
-            className={formatClassname(["title flex", hasSupportText && "mb-1"])}
-            style={{ maxWidth, alignItems: "center" }}
-          >
-            {goBackTo && (
-              <Button
-                className="flex mr-xs no-min-width"
-                onClick={() => goBackTo()}
-                style={{ padding: 2, height: "25px", minWidth: "25px", borderRadius: "4px", opacity: loading ? 0 : 1 }}
+      <div>
+          <div className={formatClassname(["main-cont flex", className])} ref={mainCont}>
+          <div className="flex-1 flex flex-column justify-content-center">
+            {typeof title === "string" ? (
+              <div
+                className={formatClassname(["title flex", hasSupportText && "mb-1"])}
+                style={{ maxWidth, alignItems: "center" }}
               >
-                <CustomIcon
-                  name="Right"
-                  style={{
-                    transform: "rotate(180deg)",
-                    width: "12px",
-                    color: "var(--base-gray-70)",
-                  }}
-                />
-              </Button>
-            )}
-            {loading ? (
-              <Skeleton active title={false} paragraph={{ rows: 1 }} style={{ marginTop: '10px' }} />
+                {goBackTo && (
+                  <Button
+                    className="flex mr-xs no-min-width"
+                    onClick={() => goBackTo()}
+                    style={{ padding: 2, height: "25px", minWidth: "25px", borderRadius: "4px", opacity: loading ? 0 : 1 }}
+                  >
+                    <CustomIcon
+                      name="Right"
+                      style={{
+                        transform: "rotate(180deg)",
+                        width: "12px",
+                        color: "var(--base-gray-70)",
+                      }}
+                    />
+                  </Button>
+                )}
+                {loading ? (
+                  <Skeleton active title={false} paragraph={{ rows: 1 }} style={{ marginTop: '10px' }} />
+                ) : (
+                  <Tooltip title={titleTooltip || title}>
+                    <h2 className={formatClassname(["mb-0 mr-1", hasButtons && "limited"])}>{title}</h2>
+                  </Tooltip>
+                )}
+                <div className="flex">
+                  {!!tooltip && (
+                    <div className="flex flex-column justify-content-center">
+                      {typeof tooltip === "string" ? (
+                        <Tooltip title={tooltip}>
+                          <InfoCircleOutlined />
+                        </Tooltip>
+                      ) : typeof tooltip === "object" ? (
+                        <Popover
+                          rootClassName={formatClassname(["header-tooltip", tooltip.className])}
+                          title={tooltip.title}
+                          content={tooltip.content}
+                        >
+                          <InfoCircleOutlined />
+                        </Popover>
+                      ) : null}
+                    </div>
+                  )}
+                  {typeof renderExtraComponents === "function" ? renderExtraComponents() : null}
+                  {hasTags && <Tags tags={tags} />}
+                </div>
+              </div>
+            ) : typeof title === "function" ? (
+              title(maxWidth)
             ) : (
-              <Tooltip title={titleTooltip || title}>
-                <h2 className={formatClassname(["mb-0 mr-1", hasButtons && "limited"])}>{title}</h2>
-              </Tooltip>
+              title
             )}
-            <div className="flex">
-              {!!tooltip && (
-                <div className="flex flex-column justify-content-center">
-                  {typeof tooltip === "string" ? (
-                    <Tooltip title={tooltip}>
-                      <InfoCircleOutlined />
-                    </Tooltip>
-                  ) : typeof tooltip === "object" ? (
-                    <Popover
-                      rootClassName={formatClassname(["header-tooltip", tooltip.className])}
-                      title={tooltip.title}
-                      content={tooltip.content}
-                    >
-                      <InfoCircleOutlined />
-                    </Popover>
-                  ) : null}
-                </div>
-              )}
-              {typeof renderExtraComponents === "function" ? renderExtraComponents() : null}
-              {hasTags && <Tags tags={tags} />}
+            <div style={{ marginLeft: goBackTo ? "33px" : 0 }} className="support-text">
+              <Paragraph ellipsis={{ tooltip: supportText, rows: 1 }} style={{ maxWidth: maxWidth }}>
+                {supportText}
+              </Paragraph>
             </div>
           </div>
-        ) : typeof title === "function" ? (
-          title(maxWidth)
-        ) : (
-          title
-        )}
-        <div style={{ marginLeft: goBackTo ? "33px" : 0 }} className="support-text">
-          <Paragraph ellipsis={{ tooltip: supportText, rows: 1 }} style={{ maxWidth: maxWidth }}>
-            {supportText}
-          </Paragraph>
-        </div>
+          {addedHeaderFirst ?
+            <div className="flex gap-2">
+              {addedHeader}
+              {hasButtons && (
+                <div ref={buttonCont}>
+                  <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
+                </div>
+              )}
+            </div> :
+            <>
+              {hasButtons && (
+                <div ref={buttonCont}>
+                  <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
+                </div>
+              )}
+              {addedHeader}
+            </>
+          }
       </div>
-      {addedHeaderFirst ?
-        <div className="flex gap-2">
-          {addedHeader}
-          {hasButtons && (
-            <div ref={buttonCont}>
-              <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
-            </div>
-          )}
-        </div> :
-        <>
-          {hasButtons && (
-            <div ref={buttonCont}>
-              <Buttons extraButtons={extraButtons} actionButtons={actionButtons} />
-            </div>
-          )}
-          {addedHeader}
-        </>
-      }
+      <div style={{ marginLeft: goBackTo ? "33px" : 0, width: '100%' }}>
+          {hasFilters && (
+              <SelectFilters
+                t={filtersConfig.t}
+                apiUrl={filtersConfig.apiUrl}
+                showFilters={showFilters}
+                onApply={filtersConfig.onApply}
+                options={filtersConfig.options}
+                setShowFilters={setShowFilters}
+                language={filtersConfig.language}
+                type={filtersConfig.type}
+                filtersConfig={filtersConfig.filtersConfig}
+                selectedFilters={filtersConfig.selectedFilters}
+                className={filtersConfig.className}
+                isHeader={true}
+              />
+            )}
+        </div>
     </div>
   );
 

package/src/@daf/core/components/Header/index.jsx

@@ -92,7 +92,7 @@ export default function DAFHeader({
 	titleTooltip,
 	supportText = "",
 	tags = [],
-	addedHeader = null,
+	addedHeader = null, 
 	addedHeaderFirst = false,
 	actionButtons = [],
 	extraButtons = [],
@@ -103,6 +103,7 @@ export default function DAFHeader({
 	renderExtraComponents,
 	app = "",
 	isViewMode = false,
+	filtersConfig = {},
 }) {
 	const showBreadcrumbs = !!breadcrumbs.length;
 	const { renderMainCont, mainContWidth } = useHeader({
@@ -122,6 +123,7 @@ export default function DAFHeader({
 		renderExtraComponents,
 		app,
 		isViewMode,
+		filtersConfig,
 	});
 
 	return (
@@ -146,4 +148,5 @@ DAFHeader.propTypes = {
 	actionButtons: PropTypes.array,
 	extraButtons: PropTypes.array,
 	downloadDisabled: PropTypes.any,
+	filtersConfig: PropTypes.any,
 };

package/src/@daf/core/components/UI/SDGIcon/index.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Tooltip, Popover } from "antd";
-import { SDG_IMAGES } from "../../../../../constants/SDGs.js";
-import { SDGList } from "./styles.js";
+import { SDG_IMAGES } from "../../../../../constants/SDGs";
+import { SDGList } from "./styles";
 
 const GAP_BETWEEN_SDGS = 4;
 
@@ -90,15 +90,7 @@ export default function SDGIcons({
                 </div>
               }
             >
-              <div
-                className="sdg-item-image sdg-item-more"
-                style={{
-                  height: iconSize,
-                  width: iconSize,
-                }}
-              >
-                +{hiddenCount}
-              </div>
+              <div className="sdg-item-image sdg-item-more">+{hiddenCount}</div>
             </Popover>
           </li>
         )}

package/src/@daf/core/components/UI/SDGIcon/styles.js

@@ -22,7 +22,5 @@ export const SDGList = styled.ul`
     justify-content: center;
     background: var(--base-gray-30);
     color: var(--base-gray-90);
-    border-radius: 8px;
-    border: 1px solid var(--base-gray-30);
   }
 `;

package/src/index.js

@@ -23,6 +23,7 @@ export { default as Badge } from "./@daf/core/components/Badge/index.jsx";
 // Icons
 export { default as GetIcon } from "./@daf/core/components/Icon/index.jsx";
 export { default as CustomIcon } from "./@daf/core/components/Icon/CustomIcon.jsx";
+
 // Filters
 export {
   default as SelectFilters,
@@ -161,6 +162,3 @@ export { default as InformationChannelsSubject } from "./@daf/core/components/Sc
 export { default as InformationChannelsView } from "./@daf/core/components/Screens/InformationChannels/InformationChannel/index.js";
 export { default as InformationChannelsDataPoint } from "./@daf/core/components/Screens/InformationChannels/DataPoint/index.js";
 export { InformationChannelProvider } from "./@daf/core/components/Screens/InformationChannels/context/index.js";
-
-// UI
-export { default as SDGIcons } from "./@daf/core/components/UI/SDGIcon/index.jsx";

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}

package/src/@daf/core/components/Filters/FloatingFilters/FloatingFilters.stories.jsx

@@ -1,64 +0,0 @@
-import SearchFilters from "./index";
-import ThemeLayout from "../../ThemeLayout";
-
-export default {
-  title: "Core/Filters/FloatingFilters",
-  component: SearchFilters,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <ThemeLayout>
-        <Story />
-      </ThemeLayout>
-    ),
-  ],
-};
-
-export const Primary = {
-  name: "Search Filters",
-  args: {
-    t: (key) => key,
-    filtersConfig: [
-      {
-        type: "select",
-        label: "Category",
-        placeholder: "Select a category",
-        key: "category",
-        options: [
-          { label: "Books", value: "books" },
-          { label: "Electronics", value: "electronics" },
-          { label: "Clothing", value: "clothing" },
-        ],
-        value: null,
-      },
-      {
-        type: "select",
-        label: "Price Range",
-        placeholder: "Select a price range",
-        key: "priceRange",
-        options: [
-          { label: "$0 - $50", value: "0-50" },
-          { label: "$51 - $100", value: "51-100" },
-          { label: "$101 - $200", value: "101-200" },
-        ],
-        value: null,
-      },
-      {
-        type: "slider",
-        label: "Rating",
-        key: "rating",
-        min: 1,
-        max: 5,
-        value: 3,
-      },
-    ],
-    onFilterChange: (changedFilter) => {
-      console.log("Filter changed:", changedFilter);
-    },
-  },
-  render: (args) => (
-    <div style={{ position: "relative", height: "400px" }}>
-      <SearchFilters {...args} />
-    </div>
-  ),
-};