feat: add null states

Author: sracca

client/components/story/story-description.tsx

@@ -15,14 +15,19 @@ const DescripTitle = styled.div`
   line-height: 1.31;
 `;
 
-const DescripBody = styled.div`
+interface BodyProps {
+  noDescrip?: boolean;
+}
+
+const DescripBody = styled.div<BodyProps>`
   color: ${colors.warmGrey};
   font-size: ${fontSizes.large};
   margin-bottom: 18px;
   white-space: pre-wrap;
   font-style: normal;
   line-height: 1.33;
   margin-bottom: 32px;
+  opacity: ${props => (props.noDescrip ? '0.5' : '1')};
 `;
 
 export const Divider = () => (
@@ -31,16 +36,21 @@ export const Divider = () => (
   </svg>
 );
 
-interface BodyProps {
+interface DescripProps {
   title: string;
   text: string;
 }
 
-const Description = ({ title, text }: BodyProps) => {
+const Description = ({ title, text }: DescripProps) => {
   return (
     <DescripWrapper>
       <DescripTitle>{title}</DescripTitle>
-      <DescripBody>{text}</DescripBody>
+      {text !== null && text !== '' ? (
+        <DescripBody>{text}</DescripBody>
+      ) : (
+        <DescripBody noDescrip>There's no description for this story yet.</DescripBody>
+      )}
+
       <Divider />
     </DescripWrapper>
   );

client/components/story/story-tasks.tsx

@@ -3,10 +3,15 @@ import styled from 'styled-components';
 import { colors, fontSizes, spacing } from '~lib/theme';
 import { Task as TaskType } from '~components/projects/types';
 
-const TaskTitle = styled.div`
+interface TitleProps {
+  noTasks?: boolean;
+}
+
+const TaskTitle = styled.div<TitleProps>`
   font-size: ${fontSizes.large};
   color: ${colors.warmGrey};
   margin-bottom: 20px;
+  opacity: ${props => (props.noTasks ? '0.5' : '1')};
 `;
 
 interface TaskDescripProps {
@@ -41,12 +46,18 @@ interface TasksProps {
 const Tasks = ({ tasks }: TasksProps) => {
   return (
     <TaskWrapper>
-      <TaskTitle>Tasks</TaskTitle>
-      <ul>
-        {tasks.map(task => (
-          <TaskDescrip completed={task.complete}>{task.description}</TaskDescrip>
-        ))}
-      </ul>
+      {tasks.length !== 0 ? (
+        <>
+          <TaskTitle>Tasks</TaskTitle>
+          <TaskList>
+            {tasks.map(task => (
+              <TaskDescrip completed={task.complete}>{task.description}</TaskDescrip>
+            ))}
+          </TaskList>
+        </>
+      ) : (
+        <TaskTitle noTasks>No tasks</TaskTitle>
+      )}
     </TaskWrapper>
   );
 };