datastake-daf 0.6.204 → 0.6.206

package/.env

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,13 @@
+{
+	"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/dist/components/index.js

@@ -11079,7 +11079,7 @@ var _templateObject$c;
 const _excluded$s = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
 function StickyTable(_ref) {
   let {
-      size = null,
+      size = "small",
       maxHeight = 300,
       containerHeight = 525,
       dataSource = [],
@@ -11089,6 +11089,9 @@ function StickyTable(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$s);
   const data = React__default["default"].useMemo(() => {
+    if (!doEmptyRows) {
+      return dataSource;
+    }
     const MIN_ROWS = 4;
     if (dataSource.length < MIN_ROWS) {
       const paddedData = [...dataSource];
@@ -11100,7 +11103,7 @@ function StickyTable(_ref) {
       return paddedData;
     }
     return dataSource;
-  }, [dataSource]);
+  }, [dataSource, doEmptyRows]);
   const Wrapper = React__default["default"].useMemo(() => {
     return data.length > 5 ? ComponentWithFocus : "div";
   }, [data.length]);
@@ -11130,7 +11133,7 @@ function StickyTable(_ref) {
     })
   });
 }
-const Style$I = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  max-width: calc(100% - 48px);\n  margin-left: var(--size-lg);\n  overflow: hidden;\n\n  .daf-table {\n    padding: 0px;\n    margin-top: 0px;\n\n    .ant-tag {\n      text-align: center;\n    }\n  }\n\n  .daf-select-filters .filters {\n    padding-top: 16px;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .daf-table {\n    padding-top: 16px;\n  }\n"])));
+const Style$I = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tmax-width: calc(100% - 48px);\n\tmargin-left: var(--size-lg);\n\toverflow: hidden;\n\n\t.daf-table {\n\t\tpadding: 0px;\n\t\tmargin-top: 0px;\n\n\t\t.ant-tag {\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.daf-select-filters .filters {\n\t\tpadding-top: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n\t.daf-table {\n\t\tpadding-top: 16px;\n\t}\n"])));
 StickyTable.propTypes = {
   size: PropTypes__default["default"].any,
   maxHeight: PropTypes__default["default"].number,
@@ -20294,6 +20297,8 @@ function WidgetPlaceholder(_ref) {
     style = {},
     iconWidth = 22,
     iconHeight = 22,
+    iconColor = "white",
+    circleColor = "#2b2c2d",
     inDevelopment = false,
     description = ""
   } = _ref;
@@ -20327,13 +20332,16 @@ function WidgetPlaceholder(_ref) {
               })
             }) : /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "icon-bubble-d",
+              style: {
+                backgroundColor: circleColor
+              },
               children: /*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "flex justify-content-center",
                 children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
                   name: icon,
                   width: iconWidth,
                   height: iconHeight,
-                  color: "white"
+                  color: iconColor
                 })
               })
             })
@@ -20849,7 +20857,8 @@ function SDGIcons(_ref) {
   let {
     sdgList = [],
     t = str => str,
-    iconSize = 24
+    iconSize = 24,
+    reverseDirection = false
   } = _ref;
   const containerRef = React__default["default"].useRef(null);
   const [width, setWidth] = React__default["default"].useState(0);
@@ -20888,6 +20897,9 @@ function SDGIcons(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: containerRef,
     children: /*#__PURE__*/jsxRuntime.jsxs(SDGList, {
+      style: {
+        flexDirection: reverseDirection ? "row-reverse" : "row"
+      },
       children: [visibleSdgs.map((sdg, index) => /*#__PURE__*/jsxRuntime.jsx("li", {
         className: "project-widget-item",
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
@@ -20968,8 +20980,8 @@ function ProjectWidget(_ref) {
       onLinkClick,
       image,
       linkIcon = "Link",
-      sdgList,
-      items,
+      sdgList = [],
+      items = [],
       onCardClick,
       hideSDGList = false,
       t = x => x
@@ -20981,9 +20993,10 @@ function ProjectWidget(_ref) {
   } = useToken$i();
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Card, _objectSpread2(_objectSpread2({
     style: {
-      flex: 1,
-      width: "100%",
-      minWidth: "200px"
+      // flex: 1,
+      width: 318,
+      minWidth: 318
+      // minWidth: "200px",
     },
     hoverable: true,
     onMouseEnter: () => setIsHovered(true),
@@ -20997,7 +21010,8 @@ function ProjectWidget(_ref) {
         }
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
-          height: "103px"
+          height: "103px",
+          borderBottom: "1px solid var(--base-gray-30)"
         },
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
           image: antd.Empty.PRESENTED_IMAGE_SIMPLE

package/package.json

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

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx

@@ -7,85 +7,87 @@ const { Meta } = Card;
 const { useToken } = theme;
 
 export default function ProjectWidget({
-  title,
-  description,
-  onLinkClick,
-  image,
-  linkIcon = "Link",
-  sdgList,
-  items,
-  onCardClick,
-  hideSDGList = false,
-  t = (x) => x,
-  ...props
+	title,
+	description,
+	onLinkClick,
+	image,
+	linkIcon = "Link",
+	sdgList = [],
+	items = [],
+	onCardClick,
+	hideSDGList = false,
+	t = (x) => x,
+	...props
 }) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { token } = useToken();
+	const [isHovered, setIsHovered] = React.useState(false);
+	const { token } = useToken();
 
-  return (
-    <Card
-      style={{
-        flex: 1,
-        width: "100%",
-        minWidth: "200px",
-      }}
-      hoverable
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={onCardClick}
-      cover={
-        <ImageContainer>
-          {image ? (
-            <div
-              className="image"
-              style={{
-                backgroundImage: `url(${image})`,
-              }}
-            />
-          ) : (
-            <div
-              style={{
-                height: "103px",
-              }}
-            >
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            </div>
-          )}
+	return (
+		<Card
+			style={{
+				// flex: 1,
+				width: 318,
+				minWidth: 318,
+				// minWidth: "200px",
+			}}
+			hoverable
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+			onClick={onCardClick}
+			cover={
+				<ImageContainer>
+					{image ? (
+						<div
+							className="image"
+							style={{
+								backgroundImage: `url(${image})`,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								height: "103px",
+								borderBottom: "1px solid var(--base-gray-30)",
+							}}
+						>
+							<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+						</div>
+					)}
 
-          {onLinkClick && (
-            <div className="icon-container" onClick={onLinkClick}>
-              <CustomIcon
-                name={linkIcon}
-                width={16}
-                height={16}
-                color={isHovered ? token.colorPrimary7 : "black"}
-              />
-            </div>
-          )}
-        </ImageContainer>
-      }
-      {...props}
-    >
-      <Meta title={title || undefined} description={description || undefined} />
-      <ProjectWidgetItems>
-        {items.map((item, index) => (
-          <li key={index} className="project-widget-item">
-            <Label>{item.label}</Label>
-            {item.render()}
-          </li>
-        ))}
-      </ProjectWidgetItems>
+					{onLinkClick && (
+						<div className="icon-container" onClick={onLinkClick}>
+							<CustomIcon
+								name={linkIcon}
+								width={16}
+								height={16}
+								color={isHovered ? token.colorPrimary7 : "black"}
+							/>
+						</div>
+					)}
+				</ImageContainer>
+			}
+			{...props}
+		>
+			<Meta title={title || undefined} description={description || undefined} />
+			<ProjectWidgetItems>
+				{items.map((item, index) => (
+					<li key={index} className="project-widget-item">
+						<Label>{item.label}</Label>
+						{item.render()}
+					</li>
+				))}
+			</ProjectWidgetItems>
 
-      {!hideSDGList && (
-        <div
-          style={{
-            borderTop: "1px solid var(--base-gray-30)",
-            paddingTop: "10px",
-          }}
-        >
-          <SdgList sdgList={sdgList} t={t} />
-        </div>
-      )}
-    </Card>
-  );
+			{!hideSDGList && (
+				<div
+					style={{
+						borderTop: "1px solid var(--base-gray-30)",
+						paddingTop: "10px",
+					}}
+				>
+					<SdgList sdgList={sdgList} t={t} />
+				</div>
+			)}
+		</Card>
+	);
 }

package/src/@daf/core/components/Dashboard/Widget/WidgetPlaceholder/WidgetPlaceholder.stories.js

@@ -22,6 +22,7 @@ export const Primary = {
 		title: "Select a focus operator to visualise its supply chain",
 		height: 500,
 		icon: "KYC",
+		circleColor: "#014A4B",
 		description:
 			"This is based on information compiled by your organisation and approved sources.",
 	},

package/src/@daf/core/components/Dashboard/Widget/WidgetPlaceholder/_style.scss

@@ -30,7 +30,7 @@
     }
 
     .icon-bubble-d {
-      background-color: #2b2c2d;
+      // background-color: #2b2c2d;
       border-radius: 100%;
       width: 57px;
       height: 57px;

package/src/@daf/core/components/Dashboard/Widget/WidgetPlaceholder/index.jsx

@@ -7,6 +7,8 @@ export default function WidgetPlaceholder({
 	style = {},
 	iconWidth = 22,
 	iconHeight = 22,
+	iconColor = "white",
+	circleColor = "#2b2c2d",
 	inDevelopment = false,
 	description = "",
 }) {
@@ -36,13 +38,16 @@ export default function WidgetPlaceholder({
 									</div>
 								</div>
 							) : (
-								<div className="icon-bubble-d">
+								<div
+									className="icon-bubble-d"
+									style={{ backgroundColor: circleColor }}
+								>
 									<div className="flex justify-content-center">
 										<CustomIcon
 											name={icon}
 											width={iconWidth}
 											height={iconHeight}
-											color="white"
+											color={iconColor}
 										/>
 									</div>
 								</div>

package/src/@daf/core/components/Table/StickyTable/index.jsx

@@ -5,90 +5,94 @@ import PropTypes from "prop-types";
 import ComponentWithFocus from "../../Dashboard/ComponentWithFocus/index.jsx";
 
 export default function StickyTable({
-  size = null,
-  maxHeight = 300,
-  containerHeight = 525,
-  dataSource = [],
-  columns = {},
-  pagination = false,
-  doEmptyRows = true,
-  ...props
+	size = "small",
+	maxHeight = 300,
+	containerHeight = 525,
+	dataSource = [],
+	columns = {},
+	pagination = false,
+	doEmptyRows = true,
+	...props
 }) {
-  const data = React.useMemo(() => {
-    const MIN_ROWS = 4;
+	const data = React.useMemo(() => {
+		if (!doEmptyRows) {
+			return dataSource;
+		}
 
-    if (dataSource.length < MIN_ROWS) {
-      const paddedData = [...dataSource];
-      while (paddedData.length < MIN_ROWS) {
-        paddedData.push({ empty: true });
-      }
-      return paddedData;
-    }
+		const MIN_ROWS = 4;
 
-    return dataSource;
-  }, [dataSource]);
+		if (dataSource.length < MIN_ROWS) {
+			const paddedData = [...dataSource];
+			while (paddedData.length < MIN_ROWS) {
+				paddedData.push({ empty: true });
+			}
+			return paddedData;
+		}
 
-  const Wrapper = React.useMemo(() => {
-    return data.length > 5 ? ComponentWithFocus : "div";
-  }, [data.length]);
+		return dataSource;
+	}, [dataSource, doEmptyRows]);
 
-  return (
-    <Wrapper>
-      <Style>
-        <div
-          className="daf-table-wrapper"
-          style={{
-            maxHeight: containerHeight,
-            overflowY: "auto",
-          }}
-        >
-          <div className="daf-sticky-table">
-            <Table
-              {...props}
-              size={size}
-              scroll
-              sticky
-              style={{ maxHeight }}
-              dataSource={data}
-              columns={columns}
-              pagination={pagination}
-            />
-          </div>
-        </div>
-      </Style>
-    </Wrapper>
-  );
+	const Wrapper = React.useMemo(() => {
+		return data.length > 5 ? ComponentWithFocus : "div";
+	}, [data.length]);
+
+	return (
+		<Wrapper>
+			<Style>
+				<div
+					className="daf-table-wrapper"
+					style={{
+						maxHeight: containerHeight,
+						overflowY: "auto",
+					}}
+				>
+					<div className="daf-sticky-table">
+						<Table
+							{...props}
+							size={size}
+							scroll
+							sticky
+							style={{ maxHeight }}
+							dataSource={data}
+							columns={columns}
+							pagination={pagination}
+						/>
+					</div>
+				</div>
+			</Style>
+		</Wrapper>
+	);
 }
 
 const Style = styled.div`
-  max-width: calc(100% - 48px);
-  margin-left: var(--size-lg);
-  overflow: hidden;
+	max-width: calc(100% - 48px);
+	margin-left: var(--size-lg);
+	overflow: hidden;
 
-  .daf-table {
-    padding: 0px;
-    margin-top: 0px;
+	.daf-table {
+		padding: 0px;
+		margin-top: 0px;
 
-    .ant-tag {
-      text-align: center;
-    }
-  }
+		.ant-tag {
+			text-align: center;
+		}
+	}
 
-  .daf-select-filters .filters {
-    padding-top: 16px;
-    padding-left: 0;
-    padding-right: 0;
-  }
+	.daf-select-filters .filters {
+		padding-top: 16px;
+		padding-left: 0;
+		padding-right: 0;
+	}
 
-  .daf-table {
-    padding-top: 16px;
-  }
+	.daf-table {
+		padding-top: 16px;
+	}
 `;
 
 StickyTable.propTypes = {
-  size: PropTypes.any,
-  maxHeight: PropTypes.number,
-  dataSource: PropTypes.array,
-  columns: PropTypes.object,
-  pagination: PropTypes.any,
+	size: PropTypes.any,
+	maxHeight: PropTypes.number,
+	dataSource: PropTypes.array,
+	columns: PropTypes.object,
+	pagination: PropTypes.any,
 };

package/src/@daf/core/components/UI/SDGIcon/SGDIcon.stories.jsx

@@ -2,54 +2,75 @@ import SDGIcon from "./index.jsx";
 import ThemeLayout from "../../ThemeLayout/index.jsx";
 
 export default {
-  title: "Components/SDGIcon",
-  component: SDGIcon,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div style={{ margin: "3em" }}>
-        <ThemeLayout>
-          <Story />
-        </ThemeLayout>
-      </div>
-    ),
-  ],
+	title: "Components/SDGIcon",
+	component: SDGIcon,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div style={{ margin: "3em" }}>
+				<ThemeLayout>
+					<Story />
+				</ThemeLayout>
+			</div>
+		),
+	],
 };
 
 export const Primary = {
-  name: "SDGIcon",
-  args: {
-    sdgList: [
-      "noPoverty",
-      "zeroHunger",
-      "goodHealthWellbeing",
-      "qualityEducation",
-      "genderEquality",
-      "cleanWaterSanitation",
-      "affordableCleanEnergy",
-      "decentWorkEconomicGrowth",
-      "industryInnovationInfrastructure",
-      "reducedInequalities",
-      "sustainableCitiesCommunities",
-      "responsibleConsumptionProduction",
-      "climateAction",
-      "lifeBelowWater",
-      "lifeOnLand",
-      "peaceJusticeStrongInstitutions",
-      "partnershipsForGoals",
-    ],
-  },
+	name: "SDGIcon",
+	args: {
+		sdgList: [
+			"noPoverty",
+			"zeroHunger",
+			"goodHealthWellbeing",
+			"qualityEducation",
+			"genderEquality",
+			"cleanWaterSanitation",
+			"affordableCleanEnergy",
+			"decentWorkEconomicGrowth",
+			"industryInnovationInfrastructure",
+			"reducedInequalities",
+			"sustainableCitiesCommunities",
+			"responsibleConsumptionProduction",
+			"climateAction",
+			"lifeBelowWater",
+			"lifeOnLand",
+			"peaceJusticeStrongInstitutions",
+			"partnershipsForGoals",
+		],
+	},
 };
 
 export const BiggerIcons = {
-  name: "BiggerIcons",
-  args: {
-    sdgList: [
-      "noPoverty",
-      "zeroHunger",
-      "goodHealthWellbeing",
-      "qualityEducation",
-    ],
-    iconSize: 80,
-  },
+	name: "BiggerIcons",
+	args: {
+		sdgList: ["noPoverty", "zeroHunger", "goodHealthWellbeing", "qualityEducation"],
+		iconSize: 80,
+	},
+};
+
+export const ReverseDirection = {
+	name: "ReverseDirection",
+	args: {
+		sdgList: [
+			"noPoverty",
+			"zeroHunger",
+			"goodHealthWellbeing",
+			"qualityEducation",
+			"genderEquality",
+			"cleanWaterSanitation",
+			"affordableCleanEnergy",
+			"decentWorkEconomicGrowth",
+			"industryInnovationInfrastructure",
+			"reducedInequalities",
+			"sustainableCitiesCommunities",
+			"responsibleConsumptionProduction",
+			"climateAction",
+			"lifeBelowWater",
+			"lifeOnLand",
+			"peaceJusticeStrongInstitutions",
+			"partnershipsForGoals",
+		],
+		reverseDirection: true,
+	},
 };

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

@@ -6,103 +6,104 @@ import { SDGList } from "./styles.js";
 const GAP_BETWEEN_SDGS = 4;
 
 export default function SDGIcons({
-  sdgList = [],
-  t = (str) => str,
-  iconSize = 24,
+	sdgList = [],
+	t = (str) => str,
+	iconSize = 24,
+	reverseDirection = false,
 }) {
-  const containerRef = React.useRef(null);
-  const [width, setWidth] = React.useState(0);
+	const containerRef = React.useRef(null);
+	const [width, setWidth] = React.useState(0);
 
-  React.useEffect(() => {
-    if (containerRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          setWidth(entry.contentRect.width);
-        }
-      });
-      resizeObserver.observe(containerRef.current);
+	React.useEffect(() => {
+		if (containerRef.current) {
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (let entry of entries) {
+					setWidth(entry.contentRect.width);
+				}
+			});
+			resizeObserver.observe(containerRef.current);
 
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, []);
+			return () => {
+				resizeObserver.disconnect();
+			};
+		}
+	}, []);
 
-  const maxSdgToShow = React.useMemo(() => {
-    const TOTAL_SPACE_FOR_SDG = iconSize + GAP_BETWEEN_SDGS;
-    return Math.floor(width / TOTAL_SPACE_FOR_SDG);
-  }, [width, iconSize]);
+	const maxSdgToShow = React.useMemo(() => {
+		const TOTAL_SPACE_FOR_SDG = iconSize + GAP_BETWEEN_SDGS;
+		return Math.floor(width / TOTAL_SPACE_FOR_SDG);
+	}, [width, iconSize]);
 
-  const { visibleSdgs, hiddenCount } = React.useMemo(() => {
-    if (sdgList.length <= maxSdgToShow) {
-      return { visibleSdgs: sdgList, hiddenCount: 0 };
-    }
-    return {
-      visibleSdgs: sdgList.slice(0, maxSdgToShow - 1),
-      hiddenCount: sdgList.length - (maxSdgToShow - 1),
-    };
-  }, [sdgList, maxSdgToShow]);
+	const { visibleSdgs, hiddenCount } = React.useMemo(() => {
+		if (sdgList.length <= maxSdgToShow) {
+			return { visibleSdgs: sdgList, hiddenCount: 0 };
+		}
+		return {
+			visibleSdgs: sdgList.slice(0, maxSdgToShow - 1),
+			hiddenCount: sdgList.length - (maxSdgToShow - 1),
+		};
+	}, [sdgList, maxSdgToShow]);
 
-  return (
-    <div ref={containerRef}>
-      <SDGList>
-        {visibleSdgs.map((sdg, index) => (
-          <li key={index} className="project-widget-item">
-            <Tooltip title={t(`SDGS::${sdg}`)}>
-              <div
-                style={{
-                  backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
-                  height: iconSize,
-                  width: iconSize,
-                }}
-                className="sdg-item-image"
-              />
-            </Tooltip>
-          </li>
-        ))}
-        {hiddenCount > 0 && (
-          <li className="project-widget-item">
-            <Popover
-              placement="top"
-              content={
-                <div
-                  style={{
-                    display: "flex",
-                    gap: "4px",
-                    flexWrap: "wrap",
-                    maxWidth: 200,
-                  }}
-                >
-                  {sdgList.slice(visibleSdgs.length).map((sdg, idx) => (
-                    <Tooltip key={idx} title={t(`SDGS::${sdg}`)}>
-                      <div
-                        style={{
-                          width: iconSize,
-                          height: iconSize,
-                          backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
-                          backgroundSize: "cover",
-                          borderRadius: 4,
-                        }}
-                        title={t(`SDGS::${sdg}`)}
-                      />
-                    </Tooltip>
-                  ))}
-                </div>
-              }
-            >
-              <div
-                className="sdg-item-image sdg-item-more"
-                style={{
-                  height: iconSize,
-                  width: iconSize,
-                }}
-              >
-                +{hiddenCount}
-              </div>
-            </Popover>
-          </li>
-        )}
-      </SDGList>
-    </div>
-  );
+	return (
+		<div ref={containerRef}>
+			<SDGList style={{ flexDirection: reverseDirection ? "row-reverse" : "row" }}>
+				{visibleSdgs.map((sdg, index) => (
+					<li key={index} className="project-widget-item">
+						<Tooltip title={t(`SDGS::${sdg}`)}>
+							<div
+								style={{
+									backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+									height: iconSize,
+									width: iconSize,
+								}}
+								className="sdg-item-image"
+							/>
+						</Tooltip>
+					</li>
+				))}
+				{hiddenCount > 0 && (
+					<li className="project-widget-item">
+						<Popover
+							placement="top"
+							content={
+								<div
+									style={{
+										display: "flex",
+										gap: "4px",
+										flexWrap: "wrap",
+										maxWidth: 200,
+									}}
+								>
+									{sdgList.slice(visibleSdgs.length).map((sdg, idx) => (
+										<Tooltip key={idx} title={t(`SDGS::${sdg}`)}>
+											<div
+												style={{
+													width: iconSize,
+													height: iconSize,
+													backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+													backgroundSize: "cover",
+													borderRadius: 4,
+												}}
+												title={t(`SDGS::${sdg}`)}
+											/>
+										</Tooltip>
+									))}
+								</div>
+							}
+						>
+							<div
+								className="sdg-item-image sdg-item-more"
+								style={{
+									height: iconSize,
+									width: iconSize,
+								}}
+							>
+								+{hiddenCount}
+							</div>
+						</Popover>
+					</li>
+				)}
+			</SDGList>
+		</div>
+	);
 }