Add visual tests for the task component and visual tweaks to the Task component

Author: winkerVSbecks

src/components/Task.js

@@ -8,7 +8,7 @@ import {
   Box,
   VisuallyHidden,
 } from '@chakra-ui/react';
-import { BellIcon } from '@chakra-ui/icons';
+import { StarIcon } from '@chakra-ui/icons';
 
 export const Task = ({
   task: { id, title, state },
@@ -47,8 +47,7 @@ export const Task = ({
         flex="1 1 auto"
         color={state === 'TASK_ARCHIVED' ? 'gray.400' : 'gray.700'}
         textDecoration={state === 'TASK_ARCHIVED' ? 'line-through' : 'none'}
-        fontSize="md"
-        fontWeight="bold"
+        fontSize="sm"
         isTruncated
         value={title}
         onChange={(e) => onEditTitle(e.target.value, id)}
@@ -59,7 +58,7 @@ export const Task = ({
       flex="none"
       aria-label={state === 'TASK_PINNED' ? 'unpin' : 'pin'}
       variant={state === 'TASK_PINNED' ? 'unpin' : 'pin'}
-      icon={<BellIcon />}
+      icon={<StarIcon />}
       onClick={() => onTogglePinTask(state, id)}
     />
   </Flex>

src/components/Task.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Task } from './Task';
+
+export default {
+  component: Task,
+  title: 'Task',
+  argTypes: {
+    onArchiveTask: { action: 'onArchiveTask' },
+    onTogglePinTask: { action: 'onTogglePinTask' },
+    onEditTitle: { action: 'onEditTitle' },
+  },
+};
+
+const Template = (args) => <Task {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  task: {
+    id: '1',
+    title: 'Buy milk',
+    state: 'TASK_INBOX',
+  },
+};
+
+export const Pinned = Template.bind({});
+Pinned.args = {
+  task: {
+    id: '2',
+    title: 'QA dropdown',
+    state: 'TASK_PINNED',
+  },
+};
+
+export const Archived = Template.bind({});
+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 = Template.bind({});
+LongTitle.args = {
+  task: {
+    id: '4',
+    title: longTitleString,
+    state: 'TASK_INBOX',
+  },
+};