From 6a337af77fb5863ae3d3ffa3d5fdf39a444251e3 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 22 Dec 2023 10:58:19 +0000
Subject: [PATCH] Task stories finalized and UI changes

---
 src/components/Task.jsx         |  2 +-
 src/components/Task.stories.jsx | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/Task.jsx b/src/components/Task.jsx
index 74f36c9..0391018 100644
--- a/src/components/Task.jsx
+++ b/src/components/Task.jsx
@@ -50,7 +50,7 @@ export default function Task({
           aria-label={state === "TASK_PINNED" ? "unpin" : "pin"}
           key={`pinTask-${id}`}
         >
-          <span className={`icon-bell`} />
+          <span className={`icon-star`} />
         </button>
       )}
     </div>
diff --git a/src/components/Task.stories.jsx b/src/components/Task.stories.jsx
index 299e89d..e4a4af3 100644
--- a/src/components/Task.stories.jsx
+++ b/src/components/Task.stories.jsx
@@ -19,3 +19,35 @@ export const Default = {
     },
   },
 };
+
+export const Pinned = {
+  args: {
+    task: {
+      id: "2",
+      title: "QA dropdown",
+      state: "TASK_PINNED",
+    },
+  },
+};
+
+export const Archived = {
+  args: {
+    task: {
+      id: "3",
+      title: "Write schema for account menu",
+      state: "TASK_ARCHIVED",
+    },
+  },
+};
+
+const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
+
+export const LongTitle = {
+  args: {
+    task: {
+      id: "4",
+      title: longTitleString,
+      state: "TASK_INBOX",
+    },
+  },
+};