datastake-daf 0.6.147 → 0.6.149

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { Card, Tooltip, theme } from "antd";
+import { ImageContainer, ProjectWidgetItems, SDGList, Label } from "./style.js";
+import CustomIcon from "../../../Icon/CustomIcon.jsx";
+import { SDG_IMAGES } from "../../../../../../constants/SDGs.js";
+
+const { Meta } = Card;
+const { useToken } = theme;
+
+export default function ProjectWidget({
+  title,
+  description,
+  onLinkClick,
+  image,
+  linkIcon = "Link",
+  sdgList,
+  items,
+  hideSDGList = false,
+  t = (x) => x,
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { token } = useToken();
+  return (
+    <Card
+      style={{
+        flex: 1,
+      }}
+      hoverable
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      cover={
+        <ImageContainer>
+          <div
+            className="image"
+            style={{
+              backgroundImage: `url(${image})`,
+            }}
+          />
+          {onLinkClick && (
+            <div className="icon-container" onClick={onLinkClick}>
+              <CustomIcon
+                name={linkIcon}
+                width={16}
+                height={16}
+                color={isHovered ? token.colorPrimary7 : "black"}
+              />
+            </div>
+          )}
+        </ImageContainer>
+      }
+    >
+      <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",
+          }}
+        >
+          <Label>SDGs:</Label>
+          <SDGList>
+            {sdgList.map((sdg, index) => {
+              return (
+                <li key={index} className="project-widget-item">
+                  <Tooltip title={t(`SDGS::${sdg}`)}>
+                    <div
+                      style={{
+                        backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+                      }}
+                      className="sdg-item-image"
+                    />
+                  </Tooltip>
+                </li>
+              );
+            })}
+          </SDGList>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/style.js

@@ -0,0 +1,74 @@
+import styled from "styled-components";
+
+export const ImageContainer = styled.div`
+	overflow: hidden;
+	position: relative;
+
+	.image {
+		width: 100%;
+		height: 151px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	.icon-container {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		background: white;
+		padding: 10px;
+		border-radius: 6px;
+		cursor: pointer;
+	}
+`;
+
+export const ProjectWidgetItems = styled.ul`
+	list-style: none;
+	padding: 0;
+	padding-top: 10px;
+	margin: 0;
+
+	.project-widget-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid var(--base-gray-30);
+		padding: 10px 0;
+
+		&:last-of-type {
+			border-bottom: 0;
+		}
+	}
+`;
+
+export const SDGList = styled.ul`
+	list-style: none;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin: 0;
+
+	.sdg-item-image {
+		width: 24px;
+		height: 24px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+`;
+
+export const Label = styled.span`
+	font-family: SF UI Display;
+	font-weight: 500;
+	font-style: Medium;
+	font-size: 14px;
+	leading-trim: NONE;
+	line-height: 26px;
+	letter-spacing: 0%;
+	color: #6c737f;
+`;

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/SDGWidget.stories.jsx

@@ -5,6 +5,32 @@ export default {
 	title: "Dashboard/Widgets/SDGWidget",
 	component: SDGWidget,
 	tags: ["autodocs"],
+	argsTypes: {
+		activeSdgGoals: {
+			control: {
+				type: "checkbox",
+			},
+			options: [
+				"noPoverty",
+				"zeroHunger",
+				"goodHealthWellbeing",
+				"qualityEducation",
+				"genderEquality",
+				"cleanWaterSanitation",
+				"affordableCleanEnergy",
+				"decentWorkEconomicGrowth",
+				"industryInnovationInfrastructure",
+				"reducedInequalities",
+				"sustainableCitiesCommunities",
+				"responsibleConsumptionProduction",
+				"climateAction",
+				"lifeBelowWater",
+				"lifeOnLand",
+				"peaceJusticeStrongInstitutions",
+				"partnershipsForGoals",
+			],
+		},
+	},
 	decorators: [
 		(Story) => (
 			<div style={{ margin: "3em" }}>
@@ -42,20 +68,10 @@ export const Primary = {
 	},
 };
 
-// NO_POVERTY: "noPoverty",
-// ZERO_HUNGER: "zeroHunger",
-// GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
-// QUALITY_EDUCATION: "qualityEducation",
-// GENDER_EQUALITY: "genderEquality",
-// CLEAN_WATER_SANITATION: "cleanWaterSanitation",
-// AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
-// DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
-// INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
-// REDUCED_INEQUALITIES: "reducedInequalities",
-// SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
-// RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
-// CLIMATE_ACTION: "climateAction",
-// LIFE_BELOW_WATER: "lifeBelowWater",
-// LIFE_ON_LAND: "lifeOnLand",
-// PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
-// PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals",
+export const Empty = {
+	name: "Empty",
+	args: {
+		title: "Sustainable Development Goals",
+		activeSdgGoals: [],
+	},
+};

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/config.js

@@ -1,29 +1,11 @@
-const KEYS = {
-	NO_POVERTY: "noPoverty",
-	ZERO_HUNGER: "zeroHunger",
-	GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
-	QUALITY_EDUCATION: "qualityEducation",
-	GENDER_EQUALITY: "genderEquality",
-	CLEAN_WATER_SANITATION: "cleanWaterSanitation",
-	AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
-	DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
-	INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
-	REDUCED_INEQUALITIES: "reducedInequalities",
-	SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
-	RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
-	CLIMATE_ACTION: "climateAction",
-	LIFE_BELOW_WATER: "lifeBelowWater",
-	LIFE_ON_LAND: "lifeOnLand",
-	PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
-	PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals",
-};
+import { SDG_KEYS as KEYS } from "../../../../../../constants/SDGs";
 
 export const getGoalConfig = () => {
 	return [
-		{ img: "/SDGs/SDGs.svg", key: KEYS.NO_POVERTY, disabled: "/SDGs/SDGs-17.svg" },
-		{ img: "/SDGs/SDGs-1.svg", key: KEYS.ZERO_HUNGER, disabled: "/SDGs/SDGs-18.svg" },
+		{ img: "/SDGs/SDGs.svg", key: KEYS.NO_POVERTY, disabled: "./SDGs/SDGs-17.svg" },
+		{ img: "/SDGs/SDGs-1.svg", key: KEYS.ZERO_HUNGER, disabled: "./SDGs/SDGs-18.svg" },
 		{
-			img:"/SDGs/SDGs-2.svg",
+			img: "/SDGs/SDGs-2.svg",
 			key: KEYS.GOOD_HEALTH_WELL_BEING,
 			disabled: "/SDGs/SDGs-19.svg",
 		},

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

@@ -32,12 +32,12 @@ export default function SDGWidget({
 
 const SDGContainer = styled.div`
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 	gap: 8px;
 
 	.sdg-item {
-		height: 90px;
-		width: 90px;
+		height: 100px;
+		width: 100px;
 		border-radius: 8px;
 		background-size: cover;
 		background-position: center;

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

@@ -7,7 +7,7 @@ import {
 	PlusOutlined,
 	DownOutlined,
 	UpOutlined,
-	RightOutlined ,
+	RightOutlined,
 } from "@ant-design/icons";
 import CustomIcon from "../../Icon/CustomIcon.jsx";
 import WidgetLoader from "./WidgetLoader/index.jsx";
@@ -18,6 +18,7 @@ import { useCollapse } from "react-collapsed";
 
 export default function Widget({
 	title = "",
+	noTitle = false,
 	children,
 	addedHeader = null,
 	tooltip,
@@ -73,102 +74,114 @@ export default function Widget({
 			])}
 		>
 			{loading && fullWidgetLoading && <WidgetLoader background="white" />}
-			<div className="widget-header flex-column">
-				<div className="flex flex-row widget-header-items">
-					<div className="title cont">
-						<h1>{title}</h1>
-					</div>
-
-					{tooltip && (
-						<div className="cont icon-cont">
-							<Tooltip
-								rootClassName="dashboard-tooltip"
-								title={<div className="max-w-250">{tooltip}</div>}
-							>
-								<InfoCircleOutlined />
-							</Tooltip>
+			{!noTitle && (
+				<div className="widget-header flex-column">
+					<div className="flex flex-row widget-header-items">
+						<div className="title cont">
+							<h1>{title}</h1>
 						</div>
-					)}
 
-					{!!filtersConfig && (
-						<div className="flex-1 flex justify-content-end">
-							<Button onClick={() => setShowFilters((p) => !p)}>
-								<CustomIcon name="Filter" width={14} height={13} className="mt-1" />
-							</Button>
-						</div>
-					)}
+						{tooltip && (
+							<div className="cont icon-cont">
+								<Tooltip
+									rootClassName="dashboard-tooltip"
+									title={<div className="max-w-250">{tooltip}</div>}
+								>
+									<InfoCircleOutlined />
+								</Tooltip>
+							</div>
+						)}
+
+						{!!filtersConfig && (
+							<div className="flex-1 flex justify-content-end">
+								<Button onClick={() => setShowFilters((p) => !p)}>
+									<CustomIcon
+										name="Filter"
+										width={14}
+										height={13}
+										className="mt-1"
+									/>
+								</Button>
+							</div>
+						)}
 
-					{addedHeaderFirst && addedHeader}
-
-					{isCollapsable && (
-						<div className="flex justify-content-end">
-							<Button
-								size="small"
-								className="flex-1 no-min-width"
-								onClick={handleCollapseToggle}
-								icon={
-									isCollapsed ? (
-										<RightOutlined style={{ width: 12 }} />
-									) : (
-										<DownOutlined style={{ width: 12 }} />
-									)
-								}
-							/>
-						</div>
-					)}
+						{addedHeaderFirst && addedHeader}
 
-					{expandable ? (
-						<div
-							className={formatClassname([
-								!(filtersConfig || addedHeaderFirst || isCollapsable) && "flex-1",
-								"flex justify-content-end",
-							])}
-						>
-							<div className="flex flex-column" {...getToggleProps()}>
+						{isCollapsable && (
+							<div className="flex justify-content-end">
 								<Button
 									size="small"
 									className="flex-1 no-min-width"
+									onClick={handleCollapseToggle}
 									icon={
-										!isExpanded ? (
-											<RightOutlined style={{ width: 10 , paddingTop: '4px'}} />
-											//<PlusOutlined style={{width: 10}} />
+										isCollapsed ? (
+											<RightOutlined style={{ width: 12 }} />
 										) : (
-											//<MinusOutlined style={{ width: 10 }} />
-											<DownOutlined style={{ width: 10, paddingTop: '4px' }} />
+											<DownOutlined style={{ width: 12 }} />
 										)
 									}
 								/>
 							</div>
-						</div>
-					) : null}
+						)}
+
+						{expandable ? (
+							<div
+								className={formatClassname([
+									!(filtersConfig || addedHeaderFirst || isCollapsable) &&
+										"flex-1",
+									"flex justify-content-end",
+								])}
+							>
+								<div className="flex flex-column" {...getToggleProps()}>
+									<Button
+										size="small"
+										className="flex-1 no-min-width"
+										icon={
+											!isExpanded ? (
+												<RightOutlined
+													style={{ width: 10, paddingTop: "4px" }}
+												/>
+											) : (
+												//<PlusOutlined style={{width: 10}} />
+												//<MinusOutlined style={{ width: 10 }} />
+												<DownOutlined
+													style={{ width: 10, paddingTop: "4px" }}
+												/>
+											)
+										}
+									/>
+								</div>
+							</div>
+						) : null}
 
-					{!addedHeaderFirst && addedHeader}
-				</div>
+						{!addedHeaderFirst && addedHeader}
+					</div>
 
-				{!!filtersConfig && (
-					<SelectFilters
-						t={filtersConfig.t}
-						apiUrl={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}
-					/>
-				)}
-
-				{!!tabsConfig && (
-					<TabsHeader
-						tabs={tabsConfig.tabs}
-						value={tabsConfig.value}
-						onChange={tabsConfig.onChange}
-					/>
-				)}
-			</div>
+					{!!filtersConfig && (
+						<SelectFilters
+							t={filtersConfig.t}
+							apiUrl={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}
+						/>
+					)}
+
+					{!!tabsConfig && (
+						<TabsHeader
+							tabs={tabsConfig.tabs}
+							value={tabsConfig.value}
+							onChange={tabsConfig.onChange}
+						/>
+					)}
+				</div>
+			)}
 
 			{!isCollapsed && (
 				<div className="widget-body" {...(expandable ? getCollapseProps() : {})}>

package/src/@daf/core/components/ProgressTabs/_index.scss

@@ -52,16 +52,6 @@
           background: transparent;
           color: #d1d5db;
         }
-        
-        // Override disabled styles when the item is selected
-        &.ant-segmented-item-selected {
-          background: #ffffff !important;
-          color: #374151 !important;
-          font-weight: 600 !important;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-          opacity: 1 !important;
-          cursor: pointer !important;
-        }
       }
     }
 
@@ -90,7 +80,7 @@
   }
 
   // Responsive design
-  @media (max-width: 800px) {
+  @media (max-width: 768px) {
     &__segmented {
       .ant-segmented-item {
         font-size: 12px;

package/src/constants/SDGs.js

@@ -0,0 +1,92 @@
+const SDG_KEYS = {
+	NO_POVERTY: "noPoverty",
+	ZERO_HUNGER: "zeroHunger",
+	GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
+	QUALITY_EDUCATION: "qualityEducation",
+	GENDER_EQUALITY: "genderEquality",
+	CLEAN_WATER_SANITATION: "cleanWaterSanitation",
+	AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
+	DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
+	INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
+	REDUCED_INEQUALITIES: "reducedInequalities",
+	SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
+	RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
+	CLIMATE_ACTION: "climateAction",
+	LIFE_BELOW_WATER: "lifeBelowWater",
+	LIFE_ON_LAND: "lifeOnLand",
+	PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
+	PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals",
+};
+
+const SDG_IMAGES = {
+	[SDG_KEYS.NO_POVERTY]: {
+		img: "/SDGs/SDGs.svg",
+		disabled: "/SDGs/SDGs-17.svg",
+	},
+	[SDG_KEYS.ZERO_HUNGER]: {
+		img: "/SDGs/SDGs-1.svg",
+		disabled: "/SDGs/SDGs-18.svg",
+	},
+	[SDG_KEYS.GOOD_HEALTH_WELL_BEING]: {
+		img: "/SDGs/SDGs-2.svg",
+		disabled: "/SDGs/SDGs-19.svg",
+	},
+	[SDG_KEYS.QUALITY_EDUCATION]: {
+		img: "/SDGs/SDGs-3.svg",
+		disabled: "/SDGs/SDGs-20.svg",
+	},
+	[SDG_KEYS.GENDER_EQUALITY]: {
+		img: "/SDGs/SDGs-4.svg",
+		disabled: "/SDGs/SDGs-21.svg",
+	},
+	[SDG_KEYS.CLEAN_WATER_SANITATION]: {
+		img: "/SDGs/SDGs-5.svg",
+		disabled: "/SDGs/SDGs-22.svg",
+	},
+	[SDG_KEYS.AFFORDABLE_CLEAN_ENERGY]: {
+		img: "/SDGs/SDGs-6.svg",
+		disabled: "/SDGs/SDGs-23.svg",
+	},
+	[SDG_KEYS.DECENT_WORK_ECONOMIC_GROWTH]: {
+		img: "/SDGs/SDGs-7.svg",
+		disabled: "/SDGs/SDGs-24.svg",
+	},
+	[SDG_KEYS.INDUSTRY_INNOVATION_INFRASTRUCTURE]: {
+		img: "/SDGs/SDGs-8.svg",
+		disabled: "/SDGs/SDGs-25.svg",
+	},
+	[SDG_KEYS.REDUCED_INEQUALITIES]: {
+		img: "/SDGs/SDGs-9.svg",
+		disabled: "/SDGs/SDGs-26.svg",
+	},
+	[SDG_KEYS.SUSTAINABLE_CITIES_COMMUNITIES]: {
+		img: "/SDGs/SDGs-10.svg",
+		disabled: "/SDGs/SDGs-27.svg",
+	},
+	[SDG_KEYS.RESPONSIBLE_CONSUMPTION_PRODUCTION]: {
+		img: "/SDGs/SDGs-11.svg",
+		disabled: "/SDGs/SDGs-29.svg",
+	},
+	[SDG_KEYS.CLIMATE_ACTION]: {
+		img: "/SDGs/SDGs-12.svg",
+		disabled: "/SDGs/SDGs-30.svg",
+	},
+	[SDG_KEYS.LIFE_BELOW_WATER]: {
+		img: "/SDGs/SDGs-13.svg",
+		disabled: "/SDGs/SDGs-31.svg",
+	},
+	[SDG_KEYS.LIFE_ON_LAND]: {
+		img: "/SDGs/SDGs-14.svg",
+		disabled: "/SDGs/SDGs-32.svg",
+	},
+	[SDG_KEYS.PEACE_JUSTICE_STRONG_INSTITUTIONS]: {
+		img: "/SDGs/SDGs-15.svg",
+		disabled: "/SDGs/SDGs-33.svg",
+	},
+	[SDG_KEYS.PARTNERSHIPS_FOR_GOALS]: {
+		img: "/SDGs/SDGs-16.svg",
+		disabled: "/SDGs/SDGs-34.svg",
+	},
+};
+
+export { SDG_KEYS, SDG_IMAGES };