From 19f10c85612083b69dfaacec99b5b88df161370b Mon Sep 17 00:00:00 2001
From: Jefffplays2005 <robloxxxx123@gmail.com>
Date: Tue, 14 May 2024 20:30:03 +1200
Subject: [PATCH 1/2] Initial commit

---
 .../ProfileInformationPanel.story.tsx         | 138 ++++++++++++++++++
 .../ProfileInformationPanel.tsx               |  39 +++++
 2 files changed, 177 insertions(+)
 create mode 100644 client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
 create mode 100644 client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx

diff --git a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
new file mode 100644
index 000000000..f71d223ce
--- /dev/null
+++ b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ProfileInformationPanel from "./ProfileInformationPanel"
+
+const meta: Meta<typeof ProfileInformationPanel> = {
+  component: ProfileInformationPanel
+}
+
+export default meta
+type Story = StoryObj<typeof ProfileInformationPanel>
+
+const firstStoryElements = [
+  {
+    subtitle: "Dietary requirements",
+    description: "Allergic to nuts"
+  },
+  {
+    subtitle: "Skiier/Snowboarder",
+    description: "Both"
+  }
+]
+
+export const littleElementsWithEdit: Story = {
+  decorators: [
+    () => {
+      return (
+        <>
+          <ProfileInformationPanel
+            title="Additional details"
+            onEdit={() => {
+              alert("button clicked")
+            }}
+          >
+            {firstStoryElements.map((x) => (
+              <>
+                <div>
+                  <p className="text-base font-normal leading-tight text-stone-300">
+                    {x.subtitle}
+                  </p>
+                  <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                    {x.description}
+                  </p>
+                </div>
+              </>
+            ))}
+          </ProfileInformationPanel>
+        </>
+      )
+    }
+  ]
+}
+
+const secondStoryElements = [
+  {
+    subtitle: "Name",
+    description: "John Doe"
+  },
+  {
+    subtitle: "Gender",
+    description: "Male"
+  },
+  {
+    subtitle: "Student ID",
+    description: "910867209"
+  },
+  {
+    subtitle: "Date of birth",
+    description: "23/06/2003"
+  },
+  {
+    subtitle: "Email",
+    description: "email@domain.com"
+  },
+  {
+    subtitle: "Phone number",
+    description: "021 123 1234"
+  },
+  {
+    subtitle: "Emergency contact info",
+    description: "Jason, Father, 021 432, 4321"
+  }
+]
+const thirdStoryElements = [
+  {
+    subtitle: "Membership type",
+    description: "UoA Student"
+  },
+  {
+    subtitle: "Valid till",
+    description: "9/12/24"
+  }
+]
+export const ManyElementsWithEdit: Story = {
+  args: {
+    title: "Personal Details",
+    onEdit: () => {
+      alert("lol")
+    },
+    children: [
+      <>
+        {secondStoryElements.map((x) => (
+          <>
+            <div>
+              <p className="text-base font-normal leading-tight text-stone-300">
+                {x.subtitle}
+              </p>
+              <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                {x.description}
+              </p>
+            </div>
+          </>
+        ))}
+      </>
+    ]
+  }
+}
+
+export const elementsWithoutEdit = {
+  args: {
+    title: "Membership",
+    children: [
+      <>
+        {thirdStoryElements.map((x) => (
+          <>
+            <div>
+              <p className="text-base font-normal leading-tight text-stone-300">
+                {x.subtitle}
+              </p>
+              <p className="text-black/opacity-20 text-base font-normal leading-tight">
+                {x.description}
+              </p>
+            </div>
+          </>
+        ))}
+      </>
+    ]
+  }
+}
diff --git a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx
new file mode 100644
index 000000000..ad051bc70
--- /dev/null
+++ b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx
@@ -0,0 +1,39 @@
+import { ReactNode } from "react"
+import editButton from "assets/icons/edit.svg"
+interface IProfileInformationPanel {
+  title: string // The title field
+  children?: ReactNode
+  onEdit?: () => void // The edit button
+}
+
+const ProfileInformationPanel = ({
+  title,
+  children,
+  onEdit
+}: IProfileInformationPanel) => {
+  return (
+    // <div className="box-border flex w-[75%] flex-col border p-4">
+    // <div className="absolute max-w-[50%] flex-row rounded border border-stone-300 bg-white p-4">
+    <div className="absolute max-w-[90%] flex-row rounded border border-stone-300 bg-white p-4">
+      <div className="flex flex-nowrap justify-between text-nowrap p-1">
+        <h3 className="text-dark-blue-100">{title}</h3>
+        {onEdit && (
+          <img
+            className="flex-end max-w-[80%] cursor-pointer items-end pl-4 pr-4"
+            src={editButton}
+            alt="Edit"
+            onClick={onEdit}
+          />
+        )}
+      </div>
+      {/* <div className="flex w-[90%] flex-row flex-wrap gap-5 p-1 pt-3"> */}
+      <div className="flex flex-row flex-wrap items-stretch justify-start gap-10 p-1 pt-3">
+        {children}
+      </div>
+      {/* </div> */}
+      {/* <div className="flex-direction: row; flex">{children}</div> */}
+    </div>
+  )
+}
+
+export default ProfileInformationPanel

From 0ac36a0391db7c855dd0dc1f75de7dd74cd8dcbb Mon Sep 17 00:00:00 2001
From: Jefffplays2005 <robloxxxx123@gmail.com>
Date: Wed, 15 May 2024 13:27:04 +1200
Subject: [PATCH 2/2] Tidying and change of icon

Removal of comments.

Changed the SVG icon to a React component.

Changed functions in storybook testing.
---
 .../ProfileInformationPanel.story.tsx         | 115 +++++++-----------
 .../ProfileInformationPanel.tsx               |  26 ++--
 2 files changed, 57 insertions(+), 84 deletions(-)

diff --git a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
index f71d223ce..7c1904f8c 100644
--- a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
+++ b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.story.tsx
@@ -5,11 +5,30 @@ import ProfileInformationPanel from "./ProfileInformationPanel"
 const meta: Meta<typeof ProfileInformationPanel> = {
   component: ProfileInformationPanel
 }
-
 export default meta
 type Story = StoryObj<typeof ProfileInformationPanel>
 
-const firstStoryElements = [
+interface TestElements {
+  subtitle: string
+  description: string
+}
+
+const ChildMapper = (children: Array<TestElements>) => {
+  return children.map((child) => (
+    <>
+      <div>
+        <p className="pb-1 text-base font-normal leading-tight text-stone-300">
+          {child.subtitle}
+        </p>
+        <p className="text-black/opacity-20 pb-1 text-base font-normal leading-tight">
+          {child.description}
+        </p>
+      </div>
+    </>
+  ))
+}
+
+const firstStoryElements: Array<TestElements> = [
   {
     subtitle: "Dietary requirements",
     description: "Allergic to nuts"
@@ -20,36 +39,6 @@ const firstStoryElements = [
   }
 ]
 
-export const littleElementsWithEdit: Story = {
-  decorators: [
-    () => {
-      return (
-        <>
-          <ProfileInformationPanel
-            title="Additional details"
-            onEdit={() => {
-              alert("button clicked")
-            }}
-          >
-            {firstStoryElements.map((x) => (
-              <>
-                <div>
-                  <p className="text-base font-normal leading-tight text-stone-300">
-                    {x.subtitle}
-                  </p>
-                  <p className="text-black/opacity-20 text-base font-normal leading-tight">
-                    {x.description}
-                  </p>
-                </div>
-              </>
-            ))}
-          </ProfileInformationPanel>
-        </>
-      )
-    }
-  ]
-}
-
 const secondStoryElements = [
   {
     subtitle: "Name",
@@ -80,6 +69,7 @@ const secondStoryElements = [
     description: "Jason, Father, 021 432, 4321"
   }
 ]
+
 const thirdStoryElements = [
   {
     subtitle: "Membership type",
@@ -90,49 +80,36 @@ const thirdStoryElements = [
     description: "9/12/24"
   }
 ]
+
+export const littleElementsWithEdit = () => {
+  return (
+    <>
+      <ProfileInformationPanel
+        title="Additional details"
+        onEdit={() => {
+          alert("Additional details button clicked")
+        }}
+      >
+        {ChildMapper(firstStoryElements)}
+      </ProfileInformationPanel>
+    </>
+  )
+}
+
 export const ManyElementsWithEdit: Story = {
   args: {
     title: "Personal Details",
     onEdit: () => {
-      alert("lol")
+      alert("Personal details edit button")
     },
-    children: [
-      <>
-        {secondStoryElements.map((x) => (
-          <>
-            <div>
-              <p className="text-base font-normal leading-tight text-stone-300">
-                {x.subtitle}
-              </p>
-              <p className="text-black/opacity-20 text-base font-normal leading-tight">
-                {x.description}
-              </p>
-            </div>
-          </>
-        ))}
-      </>
-    ]
+    children: ChildMapper(secondStoryElements)
   }
 }
 
-export const elementsWithoutEdit = {
-  args: {
-    title: "Membership",
-    children: [
-      <>
-        {thirdStoryElements.map((x) => (
-          <>
-            <div>
-              <p className="text-base font-normal leading-tight text-stone-300">
-                {x.subtitle}
-              </p>
-              <p className="text-black/opacity-20 text-base font-normal leading-tight">
-                {x.description}
-              </p>
-            </div>
-          </>
-        ))}
-      </>
-    ]
-  }
+export const elementsWithoutEdit = () => {
+  return (
+    <ProfileInformationPanel title="Membership">
+      {ChildMapper(thirdStoryElements)}
+    </ProfileInformationPanel>
+  )
 }
diff --git a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx
index ad051bc70..61fc7d4b2 100644
--- a/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx
+++ b/client/src/components/generic/ProfileInformationPanel/ProfileInformationPanel.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import editButton from "assets/icons/edit.svg"
+import EditIcon from "assets/icons/edit.svg?react"
 interface IProfileInformationPanel {
   title: string // The title field
   children?: ReactNode
@@ -12,26 +12,22 @@ const ProfileInformationPanel = ({
   onEdit
 }: IProfileInformationPanel) => {
   return (
-    // <div className="box-border flex w-[75%] flex-col border p-4">
-    // <div className="absolute max-w-[50%] flex-row rounded border border-stone-300 bg-white p-4">
-    <div className="absolute max-w-[90%] flex-row rounded border border-stone-300 bg-white p-4">
-      <div className="flex flex-nowrap justify-between text-nowrap p-1">
-        <h3 className="text-dark-blue-100">{title}</h3>
+    <div className="absolute w-[90%] flex-row rounded border border-stone-300 bg-white p-5">
+      <div className="flex flex-nowrap justify-between p-1">
+        <h3 className="text-dark-blue-100 text-nowrap">{title}</h3>
         {onEdit && (
-          <img
-            className="flex-end max-w-[80%] cursor-pointer items-end pl-4 pr-4"
-            src={editButton}
-            alt="Edit"
+          <div
+            className="inline-flex h-[30px] w-[30px] cursor-pointer items-center justify-center py-[5px] pl-[5px]"
             onClick={onEdit}
-          />
+          >
+            <EditIcon className="absolute h-5 w-[21.69px]" />
+          </div>
         )}
       </div>
-      {/* <div className="flex w-[90%] flex-row flex-wrap gap-5 p-1 pt-3"> */}
-      <div className="flex flex-row flex-wrap items-stretch justify-start gap-10 p-1 pt-3">
+
+      <div className="flex flex-row flex-wrap items-stretch justify-start gap-x-[50px] gap-y-[10px] p-1 pt-3">
         {children}
       </div>
-      {/* </div> */}
-      {/* <div className="flex-direction: row; flex">{children}</div> */}
     </div>
   )
 }