diff --git a/src/admin/components/Actions/ListActions.tsx b/src/admin/components/Actions/ListActions.tsx index c9d865da6..db6430112 100644 --- a/src/admin/components/Actions/ListActions.tsx +++ b/src/admin/components/Actions/ListActions.tsx @@ -8,9 +8,9 @@ interface ListActionsProps { const ListActions = (props: ListActionsProps) => ( - + - + + +
+ + {`${failedValidationCounter} out of ${menu.length}`}   + + + criteria are not met + +
+ + Last check at {formattedDate(lastValidationDate)} + +
+ {menu.map(item => ( +
+ + {item.label} +
+ ))} +
+ + + + No criteria checked yet + + + + + ); +}; + +export default PolygonValidation; diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx new file mode 100644 index 000000000..2ce4d833b --- /dev/null +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx @@ -0,0 +1,40 @@ +import { useT } from "@transifex/react"; + +import Button from "@/components/elements/Button/Button"; +import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown"; + +const dropdownOptions = [ + { + title: "1213023412", + value: 1 + }, + { + title: "1213023414", + value: 2 + } +]; +const VersionHistory = () => { + const t = useT(); + return ( +
+ {}} + /> +
+ + +
+
+ ); +}; + +export default VersionHistory; diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay.tsx new file mode 100644 index 000000000..a5aae6936 --- /dev/null +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay.tsx @@ -0,0 +1,256 @@ +import { useState } from "react"; +import { useShowContext } from "react-admin"; + +import Button from "@/components/elements/Button/Button"; +import Notification from "@/components/elements/Notification/Notification"; +import Text from "@/components/elements/Text/Text"; +import ModalConfirm from "@/components/extensive/Modal/ModalConfirm"; +import { useModalContext } from "@/context/modal.provider"; + +const menuPolygonOptions = [ + { + title: "Submitted", + status: "submitted", + value: 1 + }, + { + title: "Needs More Information", + status: "needs-more-information", + value: 2 + }, + { + title: "Approved", + status: "approved", + value: 3 + } +]; +const menuSiteOptions = [ + { + title: "Draft", + status: "draft", + value: 1 + }, + { + title: "Awaiting Approval", + status: "awaiting-approval", + value: 2 + }, + { + title: "Needs More Information", + status: "needs-more-information", + value: 3 + }, + { + title: "Planting in Progress", + status: "planting-in-progress", + value: 4 + }, + { + title: "Approved", + status: "approved", + value: 5 + } +]; +const menuProjectOptions = [ + { + title: "Draft", + status: "draft", + value: 1 + }, + { + title: "Awaiting Approval", + status: "awaiting-approval", + value: 2 + }, + { + title: "Needs More Information", + status: "needs-more-information", + value: 3 + }, + { + title: "Approved", + status: "approved", + value: 4 + } +]; + +export interface StatusProps { + titleStatus: "Site" | "Project" | "Polygon"; + mutate?: any; + record?: any; + refresh?: any; + name: any; + refetchPolygon?: any; + setSelectedPolygon?: any; +} + +const menuOptionsMap = { + Polygon: menuPolygonOptions, + Site: menuSiteOptions, + Project: menuProjectOptions +}; + +const DescriptionStatusMap = { + Polygon: "Are you sure you want to change the polygon status to", + Site: "Are you sure you want to change the site status to", + Project: "Are you sure you want to change the project status to" +}; + +const DescriptionRequestMap = { + Polygon: "Provide an explanation for your change request for the polygon", + Site: "Provide an explanation for your change request for the site", + Project: "Provide an explanation for your change request for the project" +}; + +const StatusDisplay = ({ titleStatus = "Polygon", mutate, refresh, name, record, setSelectedPolygon }: StatusProps) => { + const { refetch: reloadEntity } = useShowContext(); + const [notificationStatus, setNotificationStatus] = useState<{ + open: boolean; + message: string; + type: "success" | "error" | "warning"; + title: string; + }>({ + open: false, + message: "", + type: "success", + title: "Success!" + }); + + const { openModal, closeModal } = useModalContext(); + const contentStatus = ( + + {DescriptionStatusMap[titleStatus]} {name}? + + ); + const contentRequest = ( + + {DescriptionRequestMap[titleStatus]} {name}? + + ); + + const openFormModalHandlerStatus = () => { + openModal( + { + const option = menuOptionsMap[titleStatus].find(option => option.value === opt[0]); + try { + const response = await mutate({ + pathParams: { uuid: record?.uuid }, + body: { + status: option?.status, + comment: text, + type: "status" + } + }); + if (response.poly_id) { + setSelectedPolygon(response?.poly_id); + } + setNotificationStatus({ + open: true, + message: "Your Status Update was just saved!", + type: "success", + title: "Success!" + }); + setTimeout(() => { + setNotificationStatus({ + open: false, + message: "", + type: "success", + title: "Success!" + }); + }, 3000); + } catch (e) { + setNotificationStatus({ + open: true, + message: "The request encountered an issue, or the comment exceeds 255 characters.", + type: "error", + title: "Error!" + }); + } finally { + refresh(); + reloadEntity(); + closeModal(); + } + }} + /> + ); + }; + + const openFormModalHandlerRequest = () => { + openModal( + { + const option = menuOptionsMap[titleStatus].find(option => option.value === opt[0]); + try { + await mutate({ + pathParams: { uuid: record?.uuid }, + body: { + status: option?.status, + comment: text, + type: "change-request", + is_active: true, + request_removed: false + } + }); + setNotificationStatus({ + open: true, + message: "Your Change Request was just added!", + type: "success", + title: "Success!" + }); + setTimeout(() => { + setNotificationStatus({ + open: false, + message: "", + type: "success", + title: "Success!" + }); + }, 3000); + } catch (e) { + setNotificationStatus({ + open: true, + message: "The request encountered an issue, or the comment exceeds 255 characters.", + type: "error", + title: "Error!" + }); + } finally { + refresh(); + reloadEntity(); + closeModal(); + } + }} + /> + ); + }; + return ( + <> +
+
+ + +
+
+ + + ); +}; + +export default StatusDisplay; diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx new file mode 100644 index 000000000..a62a81455 --- /dev/null +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx @@ -0,0 +1,18 @@ +import StepProgressbar from "@/components/elements/ProgressBar/StepProgressbar/StepProgressbar"; + +const polygonStatusLabels = [ + { id: "1", label: "Draft" }, + { id: "2", label: "Awaiting approval" }, + { id: "3", label: "Needs more information" }, + { id: "4", label: "Planting in progress" }, + { id: "5", label: "Approved" } +]; + +const SitePolygonStatus = ({ statusLabel }: { statusLabel: string }) => { + const status = statusLabel === "Unknown" ? "Planting in progress" : statusLabel; + const statusIndex = polygonStatusLabels.findIndex(({ label }) => label === status); + const progress = statusIndex === -1 ? 0 : Math.min(100, statusIndex * 25); + return ; +}; + +export default SitePolygonStatus; diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx new file mode 100644 index 000000000..176787cee --- /dev/null +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx @@ -0,0 +1,30 @@ +import { useT } from "@transifex/react"; + +import Text from "@/components/elements/Text/Text"; + +const StatusLegend = () => { + const t = useT(); + return ( +
+ + {t("Status Legend")} + +
+ +
{t("Status Legend")} + + +
{t("Submitted")} + + +
{t("Approved")} + + +
{t("Needs More Info")} + +
+
+ ); +}; + +export default StatusLegend; diff --git a/src/admin/components/ShowTitle/index.tsx b/src/admin/components/ShowTitle/index.tsx index 88593261c..ea9032b18 100644 --- a/src/admin/components/ShowTitle/index.tsx +++ b/src/admin/components/ShowTitle/index.tsx @@ -1,6 +1,9 @@ -import { RaRecord, useRecordContext, useShowContext } from "react-admin"; +import { Link, RaRecord, useRecordContext, useResourceContext, useShowContext } from "react-admin"; import { Else, If, Then, When } from "react-if"; +import Text from "@/components/elements/Text/Text"; +import Icon from "@/components/extensive/Icon/Icon"; +import { IconNames } from "@/components/extensive/Icon/Icon"; interface IProps { moduleName?: string; getTitle: (record: RaRecord) => string; @@ -9,8 +12,8 @@ interface IProps { const ShowTitle = (props: IProps) => { const record = useRecordContext(); const { isLoading } = useShowContext(); - const title = props.getTitle(record); + const resource = useResourceContext(); return ( @@ -20,7 +23,20 @@ const ShowTitle = (props: IProps) => { {props.moduleName} {title && ": "} - {title} + + + + + + + + {title} + {props.moduleName} + + + {title} + + ); diff --git a/src/admin/components/Tables/TreeSpeciesTable.tsx b/src/admin/components/Tables/TreeSpeciesTable.tsx index d2230673e..40b2885c9 100644 --- a/src/admin/components/Tables/TreeSpeciesTable.tsx +++ b/src/admin/components/Tables/TreeSpeciesTable.tsx @@ -5,6 +5,7 @@ import { FC } from "react"; import { Else, If, Then } from "react-if"; import modules from "@/admin/modules"; +import Text from "@/components/elements/Text/Text"; import { useGetV2TreeSpeciesEntityUUID } from "@/generated/apiComponents"; type TreeSpeciesTableProps = { @@ -43,10 +44,12 @@ const TreeSpeciesTable: FC = ({ uuid, entity }) => { if (!rows || !rows.data) return null; return ( - + - Tree Species + + Tree Species + diff --git a/src/assets/fonts/Inter-Black.ttf b/src/assets/fonts/Inter-Black.ttf new file mode 100644 index 000000000..b27822bae Binary files /dev/null and b/src/assets/fonts/Inter-Black.ttf differ diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf new file mode 100644 index 000000000..fe23eeb9c Binary files /dev/null and b/src/assets/fonts/Inter-Bold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraBold.ttf b/src/assets/fonts/Inter-ExtraBold.ttf new file mode 100644 index 000000000..874b1b0dd Binary files /dev/null and b/src/assets/fonts/Inter-ExtraBold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraLight.ttf b/src/assets/fonts/Inter-ExtraLight.ttf new file mode 100644 index 000000000..c993e8221 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraLight.ttf differ diff --git a/src/assets/fonts/Inter-Light.ttf b/src/assets/fonts/Inter-Light.ttf new file mode 100644 index 000000000..71188f5cb Binary files /dev/null and b/src/assets/fonts/Inter-Light.ttf differ diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf new file mode 100644 index 000000000..a01f3777a Binary files /dev/null and b/src/assets/fonts/Inter-Medium.ttf differ diff --git a/src/assets/fonts/Inter-Regular.ttf b/src/assets/fonts/Inter-Regular.ttf new file mode 100644 index 000000000..5e4851f0a Binary files /dev/null and b/src/assets/fonts/Inter-Regular.ttf differ diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 000000000..ecc7041e2 Binary files /dev/null and b/src/assets/fonts/Inter-SemiBold.ttf differ diff --git a/src/assets/fonts/Inter-Thin.ttf b/src/assets/fonts/Inter-Thin.ttf new file mode 100644 index 000000000..fe77243fc Binary files /dev/null and b/src/assets/fonts/Inter-Thin.ttf differ diff --git a/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf b/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf new file mode 100644 index 000000000..e72470871 Binary files /dev/null and b/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf differ diff --git a/src/assets/icons/airtable.svg b/src/assets/icons/airtable.svg new file mode 100644 index 000000000..5140f89af --- /dev/null +++ b/src/assets/icons/airtable.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/applications.svg b/src/assets/icons/applications.svg new file mode 100644 index 000000000..3ae86ff2b --- /dev/null +++ b/src/assets/icons/applications.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/arrow-spin-circle.svg b/src/assets/icons/arrow-spin-circle.svg index da2e6052c..2ef7bc2af 100644 --- a/src/assets/icons/arrow-spin-circle.svg +++ b/src/assets/icons/arrow-spin-circle.svg @@ -1,16 +1,6 @@ - - - - - - - - - - + + + + + diff --git a/src/assets/icons/branch-circle.svg b/src/assets/icons/branch-circle.svg index daafaadc8..556017f20 100644 --- a/src/assets/icons/branch-circle.svg +++ b/src/assets/icons/branch-circle.svg @@ -1,28 +1,11 @@ - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + diff --git a/src/assets/icons/branding.svg b/src/assets/icons/branding.svg new file mode 100644 index 000000000..2e7aeb548 --- /dev/null +++ b/src/assets/icons/branding.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/check-polygon.svg b/src/assets/icons/check-polygon.svg new file mode 100644 index 000000000..1c078f577 --- /dev/null +++ b/src/assets/icons/check-polygon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/check-progressbar-null.svg b/src/assets/icons/check-progressbar-null.svg new file mode 100644 index 000000000..b40075d3b --- /dev/null +++ b/src/assets/icons/check-progressbar-null.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/check-progressbar.svg b/src/assets/icons/check-progressbar.svg new file mode 100644 index 000000000..63a2d40fa --- /dev/null +++ b/src/assets/icons/check-progressbar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/chevron-down-pa.svg b/src/assets/icons/chevron-down-pa.svg new file mode 100644 index 000000000..db0dd0f5d --- /dev/null +++ b/src/assets/icons/chevron-down-pa.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/chevron-left-pa.svg b/src/assets/icons/chevron-left-pa.svg new file mode 100644 index 000000000..f106c9a83 --- /dev/null +++ b/src/assets/icons/chevron-left-pa.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/clear.svg b/src/assets/icons/clear.svg new file mode 100644 index 000000000..50915c7d1 --- /dev/null +++ b/src/assets/icons/clear.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/click.svg b/src/assets/icons/click.svg new file mode 100644 index 000000000..1d459e1b4 --- /dev/null +++ b/src/assets/icons/click.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/comment.svg b/src/assets/icons/comment.svg new file mode 100644 index 000000000..13fa5d44c --- /dev/null +++ b/src/assets/icons/comment.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/document-circle.svg b/src/assets/icons/document-circle.svg index afc6410f3..bfaf92a88 100644 --- a/src/assets/icons/document-circle.svg +++ b/src/assets/icons/document-circle.svg @@ -1,7 +1,6 @@ - - - - - \ No newline at end of file + + + + + + diff --git a/src/assets/icons/document.svg b/src/assets/icons/document.svg index 7c71e955d..0a94deff1 100644 --- a/src/assets/icons/document.svg +++ b/src/assets/icons/document.svg @@ -1,6 +1,3 @@ - - - - \ No newline at end of file + + + diff --git a/src/assets/icons/download-circle.svg b/src/assets/icons/download-circle.svg index 7d7deb4d7..bbf0264cf 100644 --- a/src/assets/icons/download-circle.svg +++ b/src/assets/icons/download-circle.svg @@ -1,9 +1,6 @@ - - - - + + + + + - diff --git a/src/assets/icons/download-menu.svg b/src/assets/icons/download-menu.svg new file mode 100644 index 000000000..a02d3b585 --- /dev/null +++ b/src/assets/icons/download-menu.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/download-pa.svg b/src/assets/icons/download-pa.svg new file mode 100644 index 000000000..e1e39e561 --- /dev/null +++ b/src/assets/icons/download-pa.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg index 0bcff18c9..8f88a59ea 100644 --- a/src/assets/icons/download.svg +++ b/src/assets/icons/download.svg @@ -1,7 +1,7 @@ - - + + + + + + diff --git a/src/assets/icons/earth-map.svg b/src/assets/icons/earth-map.svg new file mode 100644 index 000000000..ff9f23e63 --- /dev/null +++ b/src/assets/icons/earth-map.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg new file mode 100644 index 000000000..6562e680f --- /dev/null +++ b/src/assets/icons/edit.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/elipses.svg b/src/assets/icons/elipses.svg new file mode 100644 index 000000000..d43a87f97 --- /dev/null +++ b/src/assets/icons/elipses.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/ellipse-polygon.svg b/src/assets/icons/ellipse-polygon.svg new file mode 100644 index 000000000..28bceeaee --- /dev/null +++ b/src/assets/icons/ellipse-polygon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/error-white-border-red.svg b/src/assets/icons/error-white-border-red.svg new file mode 100644 index 000000000..e0940f281 --- /dev/null +++ b/src/assets/icons/error-white-border-red.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/facebook.svg b/src/assets/icons/facebook.svg new file mode 100644 index 000000000..d009cc4b7 --- /dev/null +++ b/src/assets/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/filter.svg b/src/assets/icons/filter.svg new file mode 100644 index 000000000..1941e4280 --- /dev/null +++ b/src/assets/icons/filter.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/forms.svg b/src/assets/icons/forms.svg new file mode 100644 index 000000000..6bb090805 --- /dev/null +++ b/src/assets/icons/forms.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/funding-programmes.svg b/src/assets/icons/funding-programmes.svg new file mode 100644 index 000000000..bd8af59d9 --- /dev/null +++ b/src/assets/icons/funding-programmes.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/graph-1.svg b/src/assets/icons/graph-1.svg new file mode 100644 index 000000000..368cf6d22 --- /dev/null +++ b/src/assets/icons/graph-1.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/graph-2.svg b/src/assets/icons/graph-2.svg new file mode 100644 index 000000000..88dbf9fd2 --- /dev/null +++ b/src/assets/icons/graph-2.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/graph-3.svg b/src/assets/icons/graph-3.svg new file mode 100644 index 000000000..66c111924 --- /dev/null +++ b/src/assets/icons/graph-3.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/graph-4.svg b/src/assets/icons/graph-4.svg new file mode 100644 index 000000000..9f14c44f0 --- /dev/null +++ b/src/assets/icons/graph-4.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/graph-5.svg b/src/assets/icons/graph-5.svg new file mode 100644 index 000000000..e32f36df8 --- /dev/null +++ b/src/assets/icons/graph-5.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/ic-critical.svg b/src/assets/icons/ic-critical.svg new file mode 100644 index 000000000..bbf4c41c6 --- /dev/null +++ b/src/assets/icons/ic-critical.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/ic-error.svg b/src/assets/icons/ic-error.svg new file mode 100644 index 000000000..8d60f3fae --- /dev/null +++ b/src/assets/icons/ic-error.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/ic-filter.svg b/src/assets/icons/ic-filter.svg new file mode 100644 index 000000000..f7b23f206 --- /dev/null +++ b/src/assets/icons/ic-filter.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/ic-info-white.svg b/src/assets/icons/ic-info-white.svg new file mode 100644 index 000000000..bad49cc5d --- /dev/null +++ b/src/assets/icons/ic-info-white.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/ic-info.svg b/src/assets/icons/ic-info.svg new file mode 100644 index 000000000..f90755e06 --- /dev/null +++ b/src/assets/icons/ic-info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/ic-more-outlined.svg b/src/assets/icons/ic-more-outlined.svg new file mode 100644 index 000000000..fed85817f --- /dev/null +++ b/src/assets/icons/ic-more-outlined.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/ic-site-view.svg b/src/assets/icons/ic-site-view.svg new file mode 100644 index 000000000..2b0bfd977 --- /dev/null +++ b/src/assets/icons/ic-site-view.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/ic-sort.svg b/src/assets/icons/ic-sort.svg new file mode 100644 index 000000000..6326b6b13 --- /dev/null +++ b/src/assets/icons/ic-sort.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/ic-success.svg b/src/assets/icons/ic-success.svg new file mode 100644 index 000000000..fe1b136d0 --- /dev/null +++ b/src/assets/icons/ic-success.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/ic-warning.svg b/src/assets/icons/ic-warning.svg new file mode 100644 index 000000000..08b6d6e69 --- /dev/null +++ b/src/assets/icons/ic-warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg new file mode 100644 index 000000000..9db83fdae --- /dev/null +++ b/src/assets/icons/image.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/instagram.svg b/src/assets/icons/instagram.svg new file mode 100644 index 000000000..18c2195f6 --- /dev/null +++ b/src/assets/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/laptop-circle.svg b/src/assets/icons/laptop-circle.svg index 0c6ff93b8..bd401da0c 100644 --- a/src/assets/icons/laptop-circle.svg +++ b/src/assets/icons/laptop-circle.svg @@ -1,14 +1,11 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/src/assets/icons/leaf-circle.svg b/src/assets/icons/leaf-circle.svg index 2413e831c..b8c02e644 100644 --- a/src/assets/icons/leaf-circle.svg +++ b/src/assets/icons/leaf-circle.svg @@ -1,6 +1,11 @@ - - - - \ No newline at end of file + + + + + + + + + + + diff --git a/src/assets/icons/leaf.svg b/src/assets/icons/leaf.svg new file mode 100644 index 000000000..bde7c57f3 --- /dev/null +++ b/src/assets/icons/leaf.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/light-bulb-circle.svg b/src/assets/icons/light-bulb-circle.svg index e1eeaeb90..aa4ba318e 100644 --- a/src/assets/icons/light-bulb-circle.svg +++ b/src/assets/icons/light-bulb-circle.svg @@ -1,31 +1,12 @@ - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/src/assets/icons/link-pa.svg b/src/assets/icons/link-pa.svg new file mode 100644 index 000000000..3fbe8f048 --- /dev/null +++ b/src/assets/icons/link-pa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg new file mode 100644 index 000000000..0557402e8 --- /dev/null +++ b/src/assets/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/map-thumbnail.svg b/src/assets/icons/map-thumbnail.svg index 7bd2743db..1fe57be27 100644 --- a/src/assets/icons/map-thumbnail.svg +++ b/src/assets/icons/map-thumbnail.svg @@ -1,15 +1,9 @@ - - - - - + + - + - - - - + diff --git a/src/assets/icons/no-success.svg b/src/assets/icons/no-success.svg new file mode 100644 index 000000000..c59cc4c13 --- /dev/null +++ b/src/assets/icons/no-success.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/nurseries.svg b/src/assets/icons/nurseries.svg new file mode 100644 index 000000000..319d62aeb --- /dev/null +++ b/src/assets/icons/nurseries.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/organisations.svg b/src/assets/icons/organisations.svg new file mode 100644 index 000000000..6bf2f4982 --- /dev/null +++ b/src/assets/icons/organisations.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/paper-clip.svg b/src/assets/icons/paper-clip.svg new file mode 100644 index 000000000..41eb7d616 --- /dev/null +++ b/src/assets/icons/paper-clip.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/pitches.svg b/src/assets/icons/pitches.svg new file mode 100644 index 000000000..171af3f8e --- /dev/null +++ b/src/assets/icons/pitches.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/plus-circle.svg b/src/assets/icons/plus-circle.svg new file mode 100644 index 000000000..02131cad9 --- /dev/null +++ b/src/assets/icons/plus-circle.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/plus-pa.svg b/src/assets/icons/plus-pa.svg new file mode 100644 index 000000000..78a456471 --- /dev/null +++ b/src/assets/icons/plus-pa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/polygon.svg b/src/assets/icons/polygon.svg new file mode 100644 index 000000000..07da1aa85 --- /dev/null +++ b/src/assets/icons/polygon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/projects.svg b/src/assets/icons/projects.svg new file mode 100644 index 000000000..bc9a6d5b1 --- /dev/null +++ b/src/assets/icons/projects.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/refresh-circle.svg b/src/assets/icons/refresh-circle.svg index cb301f631..93b8b4936 100644 --- a/src/assets/icons/refresh-circle.svg +++ b/src/assets/icons/refresh-circle.svg @@ -1,6 +1,11 @@ - - - - \ No newline at end of file + + + + + + + + + + + diff --git a/src/assets/icons/reporting-frameworks.svg b/src/assets/icons/reporting-frameworks.svg new file mode 100644 index 000000000..f0659f925 --- /dev/null +++ b/src/assets/icons/reporting-frameworks.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/reports.svg b/src/assets/icons/reports.svg new file mode 100644 index 000000000..8fadea315 --- /dev/null +++ b/src/assets/icons/reports.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/request.svg b/src/assets/icons/request.svg new file mode 100644 index 000000000..e9faa1bf3 --- /dev/null +++ b/src/assets/icons/request.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/search-pa.svg b/src/assets/icons/search-pa.svg new file mode 100644 index 000000000..362f0df5f --- /dev/null +++ b/src/assets/icons/search-pa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg index e833b803f..ee68e55e8 100644 --- a/src/assets/icons/search.svg +++ b/src/assets/icons/search.svg @@ -1,4 +1,4 @@ - - - \ No newline at end of file + + + + diff --git a/src/assets/icons/send.svg b/src/assets/icons/send.svg new file mode 100644 index 000000000..353d61419 --- /dev/null +++ b/src/assets/icons/send.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/sites.svg b/src/assets/icons/sites.svg new file mode 100644 index 000000000..6774527da --- /dev/null +++ b/src/assets/icons/sites.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/social/twitter.svg b/src/assets/icons/social/twitter.svg index e5e6a61a1..74aab1877 100644 --- a/src/assets/icons/social/twitter.svg +++ b/src/assets/icons/social/twitter.svg @@ -1,5 +1,10 @@ - - + + + + + + + + + diff --git a/src/assets/icons/status/approved-colorless.svg b/src/assets/icons/status/approved-colorless.svg new file mode 100644 index 000000000..e2d8de255 --- /dev/null +++ b/src/assets/icons/status/approved-colorless.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/trash-circle.svg b/src/assets/icons/trash-circle.svg index 9fb3a2104..7917dadee 100644 --- a/src/assets/icons/trash-circle.svg +++ b/src/assets/icons/trash-circle.svg @@ -1,6 +1,13 @@ - - - - \ No newline at end of file + + + + + + + + + + + + + diff --git a/src/assets/icons/trash-pa.svg b/src/assets/icons/trash-pa.svg new file mode 100644 index 000000000..8ecd22422 --- /dev/null +++ b/src/assets/icons/trash-pa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/tree-circle.svg b/src/assets/icons/tree-circle.svg index b00bd8b9d..a09bbd627 100644 --- a/src/assets/icons/tree-circle.svg +++ b/src/assets/icons/tree-circle.svg @@ -1,6 +1,11 @@ - - - - \ No newline at end of file + + + + + + + + + + + diff --git a/src/assets/icons/treeBackground .svg b/src/assets/icons/treeBackground .svg new file mode 100644 index 000000000..c9eef7bcc --- /dev/null +++ b/src/assets/icons/treeBackground .svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/upload-cloud.svg b/src/assets/icons/upload-cloud.svg new file mode 100644 index 000000000..fce86a4e4 --- /dev/null +++ b/src/assets/icons/upload-cloud.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icons/user-role.svg b/src/assets/icons/user-role.svg new file mode 100644 index 000000000..6ccf236a4 --- /dev/null +++ b/src/assets/icons/user-role.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/users.svg b/src/assets/icons/users.svg new file mode 100644 index 000000000..20f3421e5 --- /dev/null +++ b/src/assets/icons/users.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/zoom-in.svg b/src/assets/icons/zoom-in.svg index 0e2c28d14..f0bb1d804 100644 --- a/src/assets/icons/zoom-in.svg +++ b/src/assets/icons/zoom-in.svg @@ -1,4 +1,8 @@ - - - - \ No newline at end of file + + + + + + + + diff --git a/src/assets/icons/zoom-out.svg b/src/assets/icons/zoom-out.svg index 3417583c8..77216853e 100644 --- a/src/assets/icons/zoom-out.svg +++ b/src/assets/icons/zoom-out.svg @@ -1,3 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/components/elements/Accordion/Accordion.tsx b/src/components/elements/Accordion/Accordion.tsx index 250bb83bd..56eb23bb3 100644 --- a/src/components/elements/Accordion/Accordion.tsx +++ b/src/components/elements/Accordion/Accordion.tsx @@ -10,7 +10,7 @@ import Text from "../Text/Text"; export interface AccordionProps extends PropsWithChildren { title: string; className?: string; - variant?: "default" | "secondary"; + variant?: "default" | "secondary" | "drawer"; defaultOpen?: boolean; ctaButtonProps?: { text: string; @@ -30,8 +30,8 @@ const Accordion = ({ {({ open }) => ( @@ -42,7 +42,16 @@ const Accordion = ({ "p-6 ": variant === "secondary" })} > - + {title}
@@ -57,7 +66,7 @@ const Accordion = ({ @@ -66,7 +75,13 @@ const Accordion = ({
- + {children} diff --git a/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot b/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot index 2a37a0363..7521c44ee 100644 --- a/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot +++ b/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Components/Elements/Accordion Default 1`] = `
diff --git a/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot b/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot index 56d176596..e162542c1 100644 --- a/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot +++ b/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot @@ -14,7 +14,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = ` onTouchStart={[Function]} >

@@ -36,7 +36,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = ` onTouchStart={[Function]} >

@@ -52,7 +52,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = ` } />

diff --git a/src/components/elements/Button/Button.tsx b/src/components/elements/Button/Button.tsx index 40f044852..996841b70 100644 --- a/src/components/elements/Button/Button.tsx +++ b/src/components/elements/Button/Button.tsx @@ -1,6 +1,7 @@ import classNames from "classnames"; import { ElementType, FC, HTMLProps, useMemo } from "react"; import { When } from "react-if"; +import { twMerge as tw } from "tailwind-merge"; import Icon, { IconProps } from "@/components/extensive/Icon/Icon"; @@ -8,7 +9,26 @@ import Icon, { IconProps } from "@/components/extensive/Icon/Icon"; export interface IButtonProps extends Omit, "as"> { as?: ElementType; iconProps?: IconProps; - variant?: "primary" | "secondary" | "text" | "link"; + variant?: + | "primary" + | "secondary" + | "text" + | "link" + | "white" + | "sky" + | "group" + | "group-active" + | "group-polygon" + | "group-active-polygon" + | "semi-black" + | "semi-red" + | "secondary-blue" + | "sky-page-admin" + | "white-page-admin" + | "white-toggle" + | "white-border" + | "orange" + | "transparent-toggle"; fullWidth?: boolean; shallow?: boolean; } @@ -29,31 +49,108 @@ const Button: FC = props => { const variantClasses = useMemo(() => { const nonTextClasses = - "rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8"; - const nonTextSpanClasses = "text-bold-caption-200 pt-0.75 leading-3"; + "rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10"; + const nonTextSpanClasses = "flex items-center text-bold-caption-200"; + const newText = + "flex items-center font-inter font-bold text-16 leading-snug tracking-tighter uppercase text-primary"; switch (variant) { case "primary": return { - container: classNames("bg-primary-500 hover:bg-primary-400 py-2", nonTextClasses), + container: classNames("bg-primary-500 hover:bg-primary-400 py-2 !text-white", nonTextClasses), span: nonTextSpanClasses }; case "secondary": return { container: classNames( - "bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75", + "bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 px-4 py-[10.5px]", nonTextClasses ), span: nonTextSpanClasses }; - + case "white-border": + return { + container: classNames( + "bg-white border border-neutral-200 hover:bg-neutral-200 py-2 !text-darkCustom-100", + nonTextClasses + ), + span: nonTextSpanClasses + }; + case "secondary-blue": + return { + container: + "group bg-white border border-primary-500 uppercase leading-[normal] px-4 py-[10.5px] rounded-lg hover:bg-grey-900 disabled:border-transparent disabled:bg-grey-750", + span: "text-primary-500 text-12-bold group-disabled:text-grey-730" + }; + case "white": + return { + container: classNames("h-fit bg-white py-4 rounded-lg"), + span: newText + }; + case "white-page-admin": + return { + container: "py-2 px-3 bg-white rounded-lg text-darkCustom-100 border border-grey-750 hover:bg-grey-900", + span: "flex items-center text-bold-caption-200 text-inherit uppercase" + }; + case "sky": + return { + container: classNames("h-fit py-4 bg-primary-200 rounded-lg"), + span: newText + }; + case "sky-page-admin": + return { + container: + "group py-2 px-3 bg-primary-200 rounded-lg text-darkCustom-100 border border-grey-750 hover:text-primary-500", + span: "flex items-center text-bold-caption-200 text-inherit uppercase" + }; case "text": - return { container: "", span: "text-bold-body-300" }; + return { container: "", span: "text-12-bold" }; case "link": return { container: "", span: "text-light-body-300 uppercase underline" }; + case "group": + return { container: "", span: "text-14-light px-3 py-1 opacity-60 rounded-lg" }; + + case "group-active": + return { container: "", span: "text-14-semibold px-3 py-1 bg-white rounded-lg" }; + case "group-polygon": + return { container: "", span: "text-14-light px-3 py-1 opacity-60 rounded-lg" }; + + case "group-active-polygon": + return { container: "bg-white rounded-lg", span: "text-14-semibold px-3 py-1 bg-white rounded-lg" }; + + case "semi-black": + return { + container: + "group bg-white border-[3px] border-grey-500 hover:border-primary-500 disabled:border-neutral-1000 px-4 py-2 rounded-lg", + span: "uppercase text-14-bold text-grey-500 group-hover:text-primary-500" + }; + + case "orange": + return { + container: + "group bg-tertiary-600 py-1.5 px-5 rounded-lg hover:opacity-90 disabled:bg-tertiary-600 disabled:opacity-70", + span: "normal-case text-10-bold text-white h-min" + }; + + case "semi-red": + return { + container: + "group bg-white border-[3px] border-error hover:border-primary-500 disabled:border-neutral-1000 px-4 py-2 rounded-lg", + span: "uppercase text-error text-14-bold group-hover:text-primary-500 leading-150" + }; + case "white-toggle": + return { + container: "group bg-white py-1 px-3 rounded", + span: "text-14-semibold text-darkCustom" + }; + case "transparent-toggle": + return { + container: "group bg-transparent px-3 py-1 rounded", + span: "text-14-light text-darkCustom-100" + }; default: return { container: "", span: "" }; } @@ -64,10 +161,12 @@ const Button: FC = props => { {...rest} disabled={disabled} className={classNames( - className, - variantClasses.container, - "flex items-center justify-center gap-1.5 tracking-wide", - fullWidth ? "w-full justify-center" : "w-fit-content" + tw( + variantClasses.container, + "flex items-center justify-center gap-1.5 tracking-wide", + fullWidth ? "w-full justify-center" : "w-fit-content", + className + ) )} > diff --git a/src/components/elements/Button/__snapshots__/Button.stories.storyshot b/src/components/elements/Button/__snapshots__/Button.stories.storyshot index 0ef0cd23d..654b3e4d2 100644 --- a/src/components/elements/Button/__snapshots__/Button.stories.storyshot +++ b/src/components/elements/Button/__snapshots__/Button.stories.storyshot @@ -2,12 +2,12 @@ exports[`Storyshots Components/Elements/Buttons Disabled Link 1`] = ` + + +

+ + +
+ + +
+ + + {value} + + +
+ +
+
+
+ + 2024 + +
+ + 43% + +
+ + +
+ + +
+ {legends?.map((legend: any, index: number) => ( + +
+   + {legend.title} + + ))} +
+ +
+ + ); +}; + +export default ItemMonitoringCards; diff --git a/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot b/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot new file mode 100644 index 000000000..d18922244 --- /dev/null +++ b/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot @@ -0,0 +1,307 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Elements/Cards/ItemMonitoringCards Default 1`] = ` +
+
+
+
+

+ Tree Count +   +

+
+
+

+ Tree Count +

+

+

+
+
+

+
+

+ 462 +

+
+
+
+`; + +exports[`Storyshots Components/Elements/Cards/ItemMonitoringCards Type Graph 1`] = ` +
+
+
+
+

+ Tree Count +   +

+
+
+

+ Tree Count +

+

+

+
+
+

+
+
+
+
+
+ +
+   + Average Number of Trees per hectare + + +
+   + Number of Trees + +
+
+
+
+`; + +exports[`Storyshots Components/Elements/Cards/ItemMonitoringCards Type Graph Button 1`] = ` +
+
+
+
+

+ EMA SNOVO +   +

+
+
+

+ EMA SNOVO +

+

+

+
+
+

+
+ + + +
+
+
+
+
+
+

+ 2024 +

+
+

+ 43% +

+
+
+
+
+
+
+`; + +exports[`Storyshots Components/Elements/Cards/ItemMonitoringCards Type Map 1`] = ` +
+
+
+
+
+ +
+
+
+
+`; diff --git a/src/components/elements/Cards/SmallGoalProgressCard/SmallGoalProgressCard.tsx b/src/components/elements/Cards/SmallGoalProgressCard/SmallGoalProgressCard.tsx index 71158c24a..402065cdd 100644 --- a/src/components/elements/Cards/SmallGoalProgressCard/SmallGoalProgressCard.tsx +++ b/src/components/elements/Cards/SmallGoalProgressCard/SmallGoalProgressCard.tsx @@ -3,7 +3,7 @@ import { DetailedHTMLProps, FC, HTMLAttributes } from "react"; import Text from "@/components/elements/Text/Text"; -import LinerProgressbar from "../../ProgressBar/LinerProgressbar/LinerProgressbar"; +import LinearProgressBar from "../../ProgressBar/LinearProgressBar/LinearProgressBar"; export interface SmallGoalProgressCardProps extends DetailedHTMLProps, HTMLDivElement> { value: number; @@ -25,7 +25,7 @@ const SmallGoalProgressCard: FC = ({ value, limit, l {/* Right */}
{valueText} - +
); diff --git a/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot b/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot index d8080a560..63d300115 100644 --- a/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot +++ b/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot @@ -20,11 +20,11 @@ exports[`Storyshots Components/Elements/Cards/SmallGoalProgressCard Default 1`] 123/200

Find out more diff --git a/src/components/elements/Cards/UserProfileCard/UserProfileCard.tsx b/src/components/elements/Cards/UserProfileCard/UserProfileCard.tsx index 2fc0e5edd..c6a7a3941 100644 --- a/src/components/elements/Cards/UserProfileCard/UserProfileCard.tsx +++ b/src/components/elements/Cards/UserProfileCard/UserProfileCard.tsx @@ -36,7 +36,7 @@ const UserProfileCard: FC = ({ const statusProps = statusMapping[status]; return ( -
+
{username}
@@ -44,14 +44,14 @@ const UserProfileCard: FC = ({
{statusProps && ( - + {statusProps.text} )} - {username} - {organisation} - + {username} + {organisation} + {email}
diff --git a/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot b/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot index daae99dda..e43d898b1 100644 --- a/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot +++ b/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot @@ -5,7 +5,7 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard Default 1`] = ` className="w-[200px]" >

Invite Sent

johndoe

SaveTheTrees

@@ -85,7 +85,7 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard No Image 1`] = ` className="w-[200px]" >

janedoe

WeLoveTrees

diff --git a/src/components/elements/Cards/UserRoleCard/UserRoleCard.stories.tsx b/src/components/elements/Cards/UserRoleCard/UserRoleCard.stories.tsx new file mode 100644 index 000000000..ecc981f27 --- /dev/null +++ b/src/components/elements/Cards/UserRoleCard/UserRoleCard.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import Component, { UserRoleCardProps as Props } from "./UserRoleCard"; + +const meta: Meta = { + title: "Components/Elements/Cards/UserRoleCard", + component: Component +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args: Props) => ( +

+ +
+ ), + args: { + title: "I’m a Funder/Investor", + description: "Evaluate ROI, aid strategic investment decisions and guide funding priorities.", + options: [ + { id: "1", data: { label: "ppc" }, render: () => null }, + { id: "2", data: { label: "terrafund" }, render: () => null } + ], + titleOptions: "Select Framework", + selected: true + } +}; diff --git a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx new file mode 100644 index 000000000..8ffd30709 --- /dev/null +++ b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx @@ -0,0 +1,99 @@ +import { useT } from "@transifex/react"; +import classNames from "classnames"; +import clsx from "clsx"; +import React from "react"; +import { When } from "react-if"; + +import Menu, { MenuItemProps } from "@/components/elements/Menu/Menu"; +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; + +export interface UserRoleCardProps { + title: string; + description: string; + selected: boolean; + options?: MenuItemProps[]; + menu?: MenuItemProps[]; + titleOptions?: string; + setSelectedOption?: any; + refContentCard?: React.RefObject; + selectedOption?: string; +} + +const UserRoleCard: React.FC = ({ + title, + description, + selected, + options, + titleOptions, + setSelectedOption, + refContentCard, + selectedOption, + menu +}) => { + const t = useT(); + const MenuOption: MenuItemProps[] = options ?? [ + { + id: "1", + render: () => ( + + {t("Select Fund")} + + ) + } + ]; + + const displayOptions = + selectedOption == null + ? null + : options?.find(m => { + if (title === "I’m a Government Official") { + return m.country_slug === selectedOption; + } else { + return m.data.label === selectedOption; + } + }); + + const diplayTitle = displayOptions ? displayOptions.data.label : ""; + + return ( +
+
+ +
+
+ + {title} + + + {description} + + + + + {titleOptions ?? t("Select Fund")} + {diplayTitle ? `: ${diplayTitle}` : ""} + + + +
+ +
+ ); +}; + +export default UserRoleCard; diff --git a/src/components/elements/Cards/UserRoleCard/__snapshots__/UserRoleCard.stories.storyshot b/src/components/elements/Cards/UserRoleCard/__snapshots__/UserRoleCard.stories.storyshot new file mode 100644 index 000000000..b8e8eec3f --- /dev/null +++ b/src/components/elements/Cards/UserRoleCard/__snapshots__/UserRoleCard.stories.storyshot @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Elements/Cards/UserRoleCard Default 1`] = ` +
+
+
+
+
+
+

+ I’m a Funder/Investor +

+

+ Evaluate ROI, aid strategic investment decisions and guide funding priorities. +

+
+

+ Select Framework +

+
+
+ + +
+
+
+
+
+
+
+`; diff --git a/src/components/elements/Commentary/Commentary.stories.tsx b/src/components/elements/Commentary/Commentary.stories.tsx new file mode 100644 index 000000000..864d99668 --- /dev/null +++ b/src/components/elements/Commentary/Commentary.stories.tsx @@ -0,0 +1,30 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { commentaryFiles } from "@/components/extensive/Modal/ModalContent/MockedData"; + +import { CommentaryProps as Props } from "./Commentary"; +import Component from "./Commentary"; + +const meta: Meta = { + title: "Components/Elements/Commentary", + component: Component +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args: Props) => ( +
+ +
+ ), + args: { + name: "Ricardo", + lastName: "Saavedra", + date: "Oct 6, 2022 at 1:12 AM", + commentary: `Don't see the outline. the source code also needs to be updated.re: aligned to one source. we need to make sure whether this is appropriate. consider that we have the organization in sign-up/profile, mask, and work request boards. On Thursday will provide the the source tables requested`, + files: commentaryFiles, + status: "submitted" + } +}; diff --git a/src/components/elements/Commentary/Commentary.tsx b/src/components/elements/Commentary/Commentary.tsx new file mode 100644 index 000000000..9230e11a7 --- /dev/null +++ b/src/components/elements/Commentary/Commentary.tsx @@ -0,0 +1,75 @@ +import { When } from "react-if"; + +import Text from "@/components/elements/Text/Text"; +export interface CommentaryFilesProps { + id: string; + file: string; +} +export interface CommentaryProps { + name: string; + lastName: string; + date: string; + commentary: string; + status?: "draft" | "submitted"; + files?: CommentaryFilesProps[]; +} + +const statusStyle = { + submitted: { container: "bg-primary-200", textColor: "text-primary" }, + draft: { container: "bg-pinkCustom-200", textColor: "text-pinkCustom" } +}; + +const Commentary = (props: CommentaryProps) => { + const { name, lastName, date, commentary, files = [], status } = props; + return ( +
+
+
+
+ + {name[0]} + {lastName[0]} + +
+
+ + {name} {lastName} + + + {date} + +
+
+ +
+ + {status} + +
+ +
+ + + {commentary} + +
+ {files.map(file => ( +
+ + {file.file} + +
+ ))} +
+
+ ); +}; + +export default Commentary; diff --git a/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot b/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot new file mode 100644 index 000000000..af2a65745 --- /dev/null +++ b/src/components/elements/Commentary/__snapshots__/Commentary.stories.storyshot @@ -0,0 +1,109 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Elements/Commentary Default 1`] = ` +
+
+
+
+
+

+ R + S +

+
+
+

+ Ricardo + + Saavedra +

+

+ Oct 6, 2022 at 1:12 AM +

+
+
+
+

+ submitted +

+
+
+

+ Don't see the outline. the source code also needs to be updated.re: aligned to one source. we need to make sure whether this is appropriate. consider that we have the organization in sign-up/profile, mask, and work request boards. On Thursday will provide the the source tables requested +

+
+
+

+ img-attachment.jpeg +

+
+
+

+ img-attachment-with-large-name.jpeg +

+
+
+

+ img-attachment.jpeg +

+
+
+

+ img-attachment.jpeg +

+
+
+
+
+`; diff --git a/src/components/elements/CommentaryBox/CommentaryBox.stories.tsx b/src/components/elements/CommentaryBox/CommentaryBox.stories.tsx new file mode 100644 index 000000000..602763c3c --- /dev/null +++ b/src/components/elements/CommentaryBox/CommentaryBox.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { CommentaryBoxProps as Props } from "./CommentaryBox"; +import Component from "./CommentaryBox"; + +const meta: Meta = { + title: "Components/Elements/CommentaryBox", + component: Component +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args: Props) => ( +
+ +
+ ), + args: { + name: "Ricardo", + lastName: "Saavedra", + buttonSendOnBox: true + } +}; diff --git a/src/components/elements/CommentaryBox/CommentaryBox.tsx b/src/components/elements/CommentaryBox/CommentaryBox.tsx new file mode 100644 index 000000000..8385e66fe --- /dev/null +++ b/src/components/elements/CommentaryBox/CommentaryBox.tsx @@ -0,0 +1,62 @@ +import { useT } from "@transifex/react"; +import { When } from "react-if"; + +import Button from "@/components/elements/Button/Button"; +import TextArea from "@/components/elements/Inputs/textArea/TextArea"; +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; + +export interface CommentaryBoxProps { + name: string; + lastName: string; + buttonSendOnBox?: boolean; + mutate?: any; + refresh?: any; + record?: any; + entity?: string; +} + +const CommentaryBox = (props: CommentaryBoxProps) => { + const { name, lastName, buttonSendOnBox } = props; + const t = useT(); + + return ( +
+
+
+ + {name[0]} + {lastName[0]} + +
+