add propTypes and fix styled to TaskColumnCard

AleksArden · May 8, 2023 · b25a61a · b25a61a
1 parent b80db1b
commit b25a61a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/components/ChoosedDay/TaskColumnCard/TaskColumnCard.jsx b/src/components/ChoosedDay/TaskColumnCard/TaskColumnCard.jsx
@@ -1,31 +1,32 @@
+import PropTypes from 'prop-types';
 import { Avatar } from 'components/Avatar/Avatar';
-import {
-  Container,
-  TaskPriority,
-  TaskAvatarWrapper,
-  TaskTitle,
-  Wrapper,
-} from './TaskColumnCard.styled';
 import { TaskToolbar } from '../TaskToolbar/TaskToolbar';
 import { TASK_PRIORITY } from 'constants/taskPriority.constants';
 
+import * as STC from './TaskColumnCard.styled';
+
 export const TaskColumnCard = ({
   title = 'Lorem ipsum dolor sit amet consectetur ',
   priority = TASK_PRIORITY.low,
   ...other
 }) => {
   return (
-    <Container>
-      <TaskTitle>{title}</TaskTitle>
-      <Wrapper>
-        <Wrapper>
-          <TaskAvatarWrapper>
+    <STC.Container>
+      <STC.TaskTitle>{title}</STC.TaskTitle>
+      <STC.Wrapper>
+        <STC.Wrapper>
+          <STC.TaskAvatarWrapper>
             <Avatar />
-          </TaskAvatarWrapper>
-          <TaskPriority priority={priority}>{priority}</TaskPriority>
-        </Wrapper>
+          </STC.TaskAvatarWrapper>
+          <STC.TaskPriority priority={priority}>{priority}</STC.TaskPriority>
+        </STC.Wrapper>
         <TaskToolbar title={title} priority={priority} {...other} />
-      </Wrapper>
-    </Container>
+      </STC.Wrapper>
+    </STC.Container>
   );
 };
+TaskColumnCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  priority: PropTypes.object.isRequired,
+  other: PropTypes.node,
+};
diff --git a/src/components/ChoosedDay/TaskColumnCard/TaskColumnCard.styled.js b/src/components/ChoosedDay/TaskColumnCard/TaskColumnCard.styled.js
@@ -5,8 +5,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 28px;
-  padding: 14px 15px 18px 14px;
 
+  padding: 14px 15px 18px 14px;
   width: 100%;
 
   background-color: var(--secondary-background-color);
@@ -39,6 +39,7 @@ export const TaskAvatarWrapper = styled.div`
 
 export const TaskPriority = styled.p`
   padding: 4px 12px;
+
   background: var(
     ${props => {
       if (props.priority === TASK_PRIORITY.medium) {
@@ -56,7 +57,6 @@ export const TaskPriority = styled.p`
   font-weight: 600;
   font-size: 10px;
   line-height: 1.2;
-
   text-align: center;
 
   color: var(--btn-text-color);