Merge pull request #13 from zimmerman-team/DropdownMenu

Dropdown menu component Merge
zimmerman-team · Nov 28, 2024 · ae55296 · ae55296
2 parents 462fbc1 + cd824f9
commit ae55296
Show file tree

Hide file tree

Showing 11 changed files with 1,445 additions and 0 deletions.
diff --git a/src/components/grids/GrantCard.stories.tsx b/src/components/grids/GrantCard.stories.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+// import { withRouter } from "storybook-addon-remix-react-router";
+import { GrantCard } from "./GrantCard";
+
+const meta = {
+  title: "Example/Grid",
+  component: GrantCard,
+  // decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof GrantCard>;
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const Primary: StoryType = {
+  args: {
+    status: "Active",
+    location: "Afghanistan",
+    rating: "B1",
+    component: "HIV",
+    number: "AZE-M-MOH",
+    principalRecipient: "Ministry of Health Ghana",
+    startDate: "12.02.2021",
+    endDate: "12.02.2023",
+    title:
+      "Scaling up the response to the HIV epidemic through strengthening national capacities, prevention and treatment services for most at risk population and maintaining access to and quality of essential MDR/XDR TB services in the Republic of Azerbaijan",
+    signed: 1000000,
+    disbursed: 1000000,
+    percentage: 80.5,
+  },
+};
diff --git a/src/components/grids/GrantCard.tsx b/src/components/grids/GrantCard.tsx
@@ -0,0 +1,156 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+import LocationIcon from "@mui/icons-material/LocationOn";
+// import { formatFinancialValue } from "../../utils/formatFinancialValue";
+import { GrantCardProps } from "./data"; // Ensure this path is correct and the file exists
+// import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
+
+export const GrantCard: React.FC<GrantCardProps> = (props: GrantCardProps) => {
+  const dates = React.useMemo(() => {
+    const res: string[] = [];
+    if (props.startDate) {
+      const date = new Date(props.startDate);
+      res.push(
+        `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
+      );
+    } else {
+      res.push("-");
+    }
+    if (props.endDate) {
+      const date = new Date(props.endDate);
+      res.push(
+        `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`
+      );
+    } else {
+      res.push("-");
+    }
+    return res;
+  }, [props.startDate, props.endDate]);
+
+  return (
+    <Box
+      display="flex"
+      padding="16px"
+      borderRadius="20px"
+      letterSpacing="0.5px"
+      bgcolor="transparent"
+      flexDirection="column"
+      border="1px solid #B1B1B1"
+      data-cy="grant-card"
+      sx={{
+        "*": {
+          lineHeight: "1.4",
+        },
+        hr: {
+          borderColor: "#DFE3E5",
+        },
+      }}
+    >
+      <Box
+        width="100%"
+        display="flex"
+        marginBottom="12px"
+        flexDirection="row"
+        justifyContent="space-between"
+      >
+        <Typography fontSize="12px" fontWeight="700">
+          {props.status}
+        </Typography>
+        <Typography fontSize="12px" fontWeight="700">
+          {props.component}
+        </Typography>
+      </Box>
+      <Box
+        width="100%"
+        display="flex"
+        marginBottom="12px"
+        flexDirection="row"
+        justifyContent="space-between"
+      >
+        <Box gap="4px" display="flex" alignItems="center" marginLeft="-4px">
+          <LocationIcon fontSize="small" />
+          <Typography fontSize="12px" fontWeight="700">
+            {props.location}
+          </Typography>
+        </Box>
+        {/* <Box gap="4px" display="flex" alignItems="center">
+            <SignalCellularAltIcon fontSize="small" />
+            <Typography fontSize="12px" fontWeight="700">
+              {props.rating}
+            </Typography>
+          </Box> */}
+      </Box>
+      <Typography variant="body1" fontWeight="700">
+        {props.number}
+      </Typography>
+      <Divider
+        sx={{
+          margin: "8px 0",
+        }}
+      />
+      <Box gap="6px" display="flex" flexDirection="column">
+        <Box width="100%" display="flex" justifyContent="space-between">
+          <Typography width="122px" fontSize="12px" fontWeight="700">
+            Principal recipient:
+          </Typography>
+          <Typography
+            fontSize="12px"
+            overflow="hidden"
+            whiteSpace="nowrap"
+            letterSpacing="normal"
+            textOverflow="ellipsis"
+            maxWidth="calc(100% - 142px)"
+          >
+            {props.principalRecipient}
+          </Typography>
+        </Box>
+        <Box width="100%" display="flex" justifyContent="space-between">
+          <Typography fontSize="12px" fontWeight="700">
+            Start / end date:
+          </Typography>
+          <Typography fontSize="12px" letterSpacing="normal">
+            {dates.join(" / ")}
+          </Typography>
+        </Box>
+      </Box>
+      <Divider
+        sx={{
+          margin: "8px 0 16px 0",
+        }}
+      />
+      <Box gap="6px" display="flex" flexDirection="column">
+        <Box width="100%" display="flex" justifyContent="space-between">
+          <Typography fontSize="12px" fontWeight="700">
+            Signed
+          </Typography>
+          <Typography fontSize="12px" letterSpacing="normal">
+            {/* {formatFinancialValue(props.signed)} */}
+          </Typography>
+        </Box>
+        <Box width="100%" display="flex" justifyContent="space-between">
+          <Typography fontSize="12px" fontWeight="700">
+            Disbursed · {props.percentage}%
+          </Typography>
+          <Typography fontSize="12px" letterSpacing="normal">
+            {/* {formatFinancialValue(props.disbursed)} */}
+          </Typography>
+        </Box>
+        <Box
+          width="100%"
+          height="4px"
+          display="flex"
+          bgcolor="#C7CDD1"
+          borderRadius="20px"
+        >
+          <Box
+            bgcolor="#373D43"
+            borderRadius="20px"
+            width={`${props.percentage}%`}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/components/grids/data.ts b/src/components/grids/data.ts
@@ -0,0 +1,14 @@
+export interface GrantCardProps {
+  status: string;
+  location: string;
+  rating: string;
+  component: string;
+  number: string;
+  principalRecipient: string;
+  startDate: string;
+  endDate: string;
+  title: string;
+  signed: number;
+  disbursed: number;
+  percentage: number;
+}
diff --git a/src/components/menu/MUI-FormControl/data.tsx b/src/components/menu/MUI-FormControl/data.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const ArrowDown = (props: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M8.00006 11.1666C7.86735 11.1672 7.73998 11.1143 7.64673 11.0199L2.31339 5.68656C2.12982 5.48956 2.13524 5.18256 2.32565 4.99215C2.51605 4.80174 2.82305 4.79633 3.02006 4.9799L8.00006 9.9599L12.9801 4.9799C13.1771 4.79633 13.4841 4.80174 13.6745 4.99215C13.8649 5.18256 13.8703 5.48956 13.6867 5.68656L8.35339 11.0199C8.26014 11.1143 8.13277 11.1672 8.00006 11.1666Z"
+          fill="white"
+        />
+      </svg>
+    );
+  };
+
diff --git a/src/components/menu/MUI-FormControl/form.stories.tsx b/src/components/menu/MUI-FormControl/form.stories.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { withRouter } from "storybook-addon-remix-react-router";
+import {formComponent} from "./index";
+import {ArrowDown} from "./data";
+
+
+const meta = {
+    title: "Example/Dropdown/MUI-FormControl",
+    component: formComponent,
+    decorators: [withRouter],
+    parameters: {
+      layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+    argTypes: {},
+  } satisfies Meta<typeof formComponent>;
+
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
+
+export const AIDAPrimary: StoryType = {
+  args: {
+    id: "select-field",
+    onChange: () => {},
+    options: [
+      { label: "Option 1", value: "option-1" },
+      { label: "Option 2", value: "option-2" },
+      { label: "Option 3", value: "option-3" },
+    ],
+    value: "option-1",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/vgdX46lAwjQwfV6YyEfaG4/AIDA-V3-MAIN?node-id=2413-43104",
+    },
+  },
+};
+
+export const AIDAOutlined: StoryType = {
+  args: {
+    id: "select-field",
+    onChange: () => {},
+    options: Array.from({ length: 50 }, (_, index) => ({
+        label: `Option ${index + 1}`,
+        value: `option-${index + 1}`,
+      })),
+    value: "option-1",
+    variant: "outlined",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/vgdX46lAwjQwfV6YyEfaG4/AIDA-V3-MAIN?node-id=2413-43104",
+    },
+  },
+};
+
+export const AIDASelectMonth: StoryType = {
+    args: {
+      id: "select-month",
+      onChange: () => {},
+      options: [
+        { label: "January", value: "january" },
+        { label: "February", value: "february" },
+        { label: "March", value: "march" },
+        { label: "April", value: "april" },
+        { label: "May", value: "may" },
+        { label: "June", value: "june" },
+        { label: "July", value: "july" },
+        { label: "August", value: "august" },
+        { label: "September", value: "september" },
+        { label: "October", value: "october" },
+        { label: "November", value: "november" },
+        { label: "December", value: "december" },
+      ],
+      IconComponent: (props) => <ArrowDown {...props} stroke="black" />,
+      value: "january",
+      variant: "outlined",
+      width: "300px",
+      height: "40px",
+    },
+    parameters: {
+        design: {
+          type: "figma",
+          url: "https://www.figma.com/design/vgdX46lAwjQwfV6YyEfaG4/AIDA-V3-Main-Design?node-id=5363-21933&t=3oO3wnK985shYT1C-4",
+        },
+      },
+  };
+
+export const MultipleSelection: StoryType = {
+    args: {
+      id: "select-field-multiple",
+      onChange: () => {},
+      options: [
+        { label: "Option 1", value: "option-1" },
+        { label: "Option 2", value: "option-2" },
+        { label: "Option 3", value: "option-3" },
+      ],
+      value:[],
+      label: "Multiple Select",
+      placeholder: "Select options",
+      variant: "outlined",
+      multiple: true,
+      width: "300px",
+      height: "40px",
+    },
+  };
+
+  export const CustomStyles: StoryType = {
+    args: {
+      id: "select-field-custom-styles",
+      onChange: () => {},
+      options: [
+        { label: "Option 1", value: "option-1" },
+        { label: "Option 2", value: "option-2" },
+        { label: "Option 3", value: "option-3" },
+      ],
+      value:[],
+      label: "Custom Styles Select",
+      placeholder: "Select an option",
+      variant: "outlined",
+      width: "300px",
+      height: "40px",
+      sx: {
+        ".MuiInputBase-root": {
+          background: "lightblue",
+          borderRadius: "10px",
+        },
+        ".MuiInputBase-input": {
+          color: "darkblue",
+        },
+        ".MuiSelect-icon": {
+          color: "darkblue",
+        },
+      },
+    },
+  };
+
+  export const WithIconComponent: StoryType = {
+    args: {
+      id: "select-field-icon",
+      onChange: () => {},
+      options: [
+        { label: "Option 1", value: "option-1" },
+        { label: "Option 2", value: "option-2" },
+        { label: "Option 3", value: "option-3" },
+      ],
+      value:[],
+      label: "Select with Custom Icon",
+      placeholder: "Select an option",
+      variant: "outlined",
+      width: "300px",
+      height: "40px",
+      IconComponent: (props) => <ArrowDown {...props} stroke="red" />,
+    },
+  };