datastake-daf 0.6.168 → 0.6.170

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

@@ -2,78 +2,84 @@ import Segment from "./index.jsx";
 import ThemeLayout from "../ThemeLayout/index.jsx";
 import CustomIcon from "../Icon/CustomIcon.jsx";
 export default {
-	title: "Core/Segment/Segment",
-	component: Segment,
-	tags: ["autodocs"],
-	decorators: [
-		(Story) => (
-			<div style={{ margin: "3em" }}>
-				<ThemeLayout>
-					<Story />
-				</ThemeLayout>
-			</div>
-		),
-	],
+  title: "Components/Segment",
+  component: Segment,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <ThemeLayout>
+          <Story />
+        </ThemeLayout>
+      </div>
+    ),
+  ],
 };
 
 export const Primary = {
-	name: "Default",
-	args: {
-		options: [
-			{ label: "Option 1", value: "option1" },
-			{ label: "Option 2", value: "option2", disabled: true },
-			{ label: "Option 3", value: "option3" },
-		],
-		defaultSelected: "option3",
-	},
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Segment {...args} />
-		</div>
-	),
+  name: "Default",
+  args: {
+    options: [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2", disabled: true },
+      { label: "Option 3", value: "option3" },
+    ],
+    defaultSelected: "option3",
+  },
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Segment {...args} />
+    </div>
+  ),
 };
 
 export const Icon = {
-	name: "Icons",
-	args: {
-		options: [
-			{
-				label: <CustomIcon name="DataPoints" width={17} height={17} />,
-				value: "option1",
-				tooltip: "OPTION 1",
-			},
-			{ label: <CustomIcon name="DataFlow02" width={17} height={17} />, value: "option2" },
-			{
-				label: <CustomIcon name="Arms" width={17} height={17} />,
-				value: "option3",
-				tooltip: false,
-			},
-		],
-	},
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Segment {...args} />
-		</div>
-	),
+  name: "Icons",
+  args: {
+    options: [
+      {
+        label: <CustomIcon name="DataPoints" width={17} height={17} />,
+        value: "option1",
+        tooltip: "OPTION 1",
+      },
+      {
+        label: <CustomIcon name="DataFlow02" width={17} height={17} />,
+        value: "option2",
+      },
+      {
+        label: <CustomIcon name="Arms" width={17} height={17} />,
+        value: "option3",
+        tooltip: false,
+      },
+    ],
+  },
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Segment {...args} />
+    </div>
+  ),
 };
 
 export const SameSize = {
-	name: "Same Width",
-	args: {
-		options: [
-			{ label: <CustomIcon name="DataPoints" width={17} height={17} />, value: "option1" },
-			{ label: "Option 2", value: "option2" },
-			{ label: "Option WITH LONG TEXT", value: "option3" },
-		],
-		optionStyle: {
-			padding: "1px 8px",
-		},
-		sameWidth: true,
-	},
+  name: "Same Width",
+  args: {
+    options: [
+      {
+        label: <CustomIcon name="DataPoints" width={17} height={17} />,
+        value: "option1",
+      },
+      { label: "Option 2", value: "option2" },
+      { label: "Option WITH LONG TEXT", value: "option3" },
+    ],
+    optionStyle: {
+      padding: "1px 8px",
+    },
+    sameWidth: true,
+  },
 
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Segment {...args} />
-		</div>
-	),
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Segment {...args} />
+    </div>
+  ),
 };

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

@@ -0,0 +1,55 @@
+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>
+    ),
+  ],
+};
+
+export const Primary = {
+  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,
+  },
+};

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

@@ -0,0 +1,100 @@
+import React from "react";
+import { Tooltip, Popover } from "antd";
+import { SDG_IMAGES } from "../../../../../constants/SDGs";
+import { SDGList } from "./styles";
+
+const GAP_BETWEEN_SDGS = 4;
+
+export default function SDGIcons({
+  sdgList = [],
+  t = (str) => str,
+  iconSize = 24,
+}) {
+  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);
+
+      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 { 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">+{hiddenCount}</div>
+            </Popover>
+          </li>
+        )}
+      </SDGList>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const SDGList = styled.ul`
+  list-style: none;
+  padding: 0;
+  width: 100%;
+  overflow-x: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  margin: 0;
+
+  .sdg-item-image {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .sdg-item-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--base-gray-30);
+    color: var(--base-gray-90);
+  }
+`;

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

@@ -231,7 +231,7 @@
       display: flex;
       flex-direction: column;
       overflow-y: auto;
-      padding: var(--size-lg) var(--size-lg) 0 var(--size-lg);
+      padding: var(--size-lg) var(--size-lg) 60px var(--size-lg); // Added bottom padding for better scrolling
 
       &.no-padding {
         padding: 0px;

package/src/index.js

@@ -72,6 +72,8 @@ export { default as SDGWidget } from "./@daf/core/components/Dashboard/Widget/SD
 export { default as ComponentWithFocus } from "./@daf/core/components/Dashboard/ComponentWithFocus/index.jsx";
 export { default as ProjectWidget } from "./@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx";
 export { default as WidgetCard } from "./@daf/core/components/Dashboard/Widget/WidgetCard/index.js";
+export { default as CarouselWidget } from "./@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx";
+export { default as ImageCarousel } from "./@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx";
 // export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms

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

@@ -1,27 +0,0 @@
-/* eslint-disable react/jsx-filename-extension */
-import Icon from './index'
-
-import ThemeLayout from '../ThemeLayout'
-
-export default {
-  title: 'Core/Icon/AntIcon',
-  component: Icon,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <ThemeLayout>
-          <Story />
-        </ThemeLayout>
-      </div>
-    ),
-  ],
-}
-
-export const Primary = {
-  name: 'Warning Icon',
-  args: {
-    icon: 'CloseOutlined',
-  },
-}
-