Feat/add allocation bar on ballot form (#80)

Author: nijoe1

.changeset/many-carrots-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@gitcoin/ui": patch
+---
+
+feat: adds an allocation bar to the ballot form

packages/ui/src/features/retrofunding/components/BallotForm/BallotForm.tsx

@@ -180,6 +180,11 @@ export const BallotForm: React.FC<BallotFormProps> = ({
     () => sortFieldsByOrder(itemsArray, sortOrder || DEFAULT_SORT_ORDER),
     [itemsArray, sortOrder],
   );
+
+  const sumOfAllocations = useMemo(() => {
+    return getTotalAllocation(items);
+  }, [items]);
+
   if (!isReady) return null;
 
   return (
@@ -189,7 +194,11 @@ export const BallotForm: React.FC<BallotFormProps> = ({
         onShare={onShare}
       />
       <div className="w-[720px] space-y-4 rounded-xl border border-grey-300 bg-grey-50 p-10">
-        <BallotHeader sortOrder={sortOrder ?? DEFAULT_SORT_ORDER} setSortOrder={setSortOrder} />
+        <BallotHeader
+          sortOrder={sortOrder ?? DEFAULT_SORT_ORDER}
+          setSortOrder={setSortOrder}
+          sumOfAllocations={sumOfAllocations}
+        />
         <div>
           {sortedFields.map((item, idx) => {
             const { metricId } = item;

packages/ui/src/features/retrofunding/components/BallotForm/components/BallotHeader.tsx

@@ -1,14 +1,16 @@
 import { tv } from "tailwind-variants";
 
 import { sortOptions } from "@/features/retrofunding/utils/metricsBallot";
-import { Select } from "@/primitives";
+import { ProgressBar, Select } from "@/primitives";
 
 const variants = tv({
   slots: {
     container: "flex items-center justify-between text-sm text-grey-500",
     titleContainer: "flex w-[520px] flex-col justify-start gap-2",
     title: "text-lg font-medium text-black",
     description: "text-sm font-normal text-grey-900",
+    progressBarContainer: "flex items-center gap-2",
+    progressBarLabel: "font-ui-sans text-sm font-normal text-black",
     select:
       "w-fit shrink-0 px-3 py-2 font-medium ring-0 hover:ring-0 focus:outline-none focus:ring-0 active:ring-0",
   },
@@ -18,14 +20,19 @@ const BALLOT_INFO =
   "Distribute your votes across the metrics on your ballot as percentages, ensuring they add up to 100% before submission. You can hide metrics if needed and revisit this step anytime before finalizing your ballot.";
 
 interface BallotHeaderProps {
+  sumOfAllocations: number;
   sortOrder: string;
   setSortOrder: (value: string) => void;
 }
 
-export const BallotHeader = ({ sortOrder, setSortOrder }: BallotHeaderProps) => (
+export const BallotHeader = ({ sortOrder, setSortOrder, sumOfAllocations }: BallotHeaderProps) => (
   <div className={variants().container()}>
     <div className={variants().titleContainer()}>
-      <span className={variants().title()}>Your Ballot</span>
+      <div className={variants().progressBarContainer()}>
+        <span className={variants().title()}>Your Ballot</span>
+        <ProgressBar variant="green-sm" value={sumOfAllocations} max={100} />
+        <span className={variants().progressBarLabel()}>{sumOfAllocations}% allocated</span>
+      </div>
       <span className={variants().description()}>{BALLOT_INFO}</span>
     </div>
     <Select

packages/ui/src/primitives/ProgressBar/ProgressBar.tsx

@@ -12,7 +12,7 @@ export interface ProgressBarProps {
   withLabel?: boolean;
 }
 
-export type ProgressVariants = "default" | "green" | "green-md";
+export type ProgressVariants = "default" | "green" | "green-sm" | "green-md";
 
 const progressVariants = tv({
   slots: {
@@ -29,6 +29,10 @@ const progressVariants = tv({
         root: " bg-grey-100",
         indicator: "bg-moss-700",
       },
+      "green-sm": {
+        root: "h-2 w-[136px] bg-grey-100",
+        indicator: "bg-moss-700",
+      },
       "green-md": {
         root: "w-[228px] bg-grey-100",
         indicator: "bg-moss-700",
@@ -43,7 +47,7 @@ const progressVariants = tv({
 export const ProgressBar = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
-    variant?: "default" | "green" | "green-md";
+    variant?: "default" | "green" | "green-sm" | "green-md";
     withLabel?: boolean;
   }
 >(({ className, value, variant = "default", withLabel = false, ...props }, ref) => {