feat(feat): add props in visitorComment components

add props in visitorComment component#16 #1644[Ds
modern-agile-team · Oct 3, 2022 · 4d56c8f · 4d56c8f
1 parent bcff6ef
commit 4d56c8f
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 51 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -40,7 +40,18 @@ function App() {
       <Channels />
 
       <VisitorCounter />
-      <VisitorComment id="['VisitorComment', 'akar-icons:comment-add']" />
+      <VisitorComment
+        id="['VisitorComment', 'akar-icons:comment-add']"
+        inputBackgroundColor="red"
+        inputFontColor="white"
+        inputPlacehoderColor="white"
+        buttonColor="white"
+        listBackgroundColor="red"
+        commentColor="white"
+        listNicknameColor="white"
+        listDateColor="white"
+        theme="vertical"
+      />
 
       <CardWrap id="['CardWrap','bi:card-list']">
         <Card width="20vw" height="20vw" hover="down" redirectURL="/1">
@@ -70,7 +81,13 @@ function App() {
       <TechStackList id="['TechStackList', 'vscode-icons:file-type-reactjs']" />
       <TechStackInput />
 
-      <Experience id="['Experience', 'ic:outline-work-history']" />
+      <Experience
+        id="['Experience', 'ic:outline-work-history']"
+        historyTitleColor="red"
+        headerTitleColor="red"
+        dateColor="red"
+        descriptionColor="red"
+      />
 
       <Gallery id="['Gallery', 'clarity:image-gallery-line']" theme="mint-chocolate">
         <Item

diff --git a/src/lib/common/types/ComponentTypes/ExperienceType.ts b/src/lib/common/types/ComponentTypes/ExperienceType.ts
@@ -19,9 +19,16 @@ export interface ExperiencePropsType extends ExperienceVerticalOptionType {
    * You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'.	(default: basic)
    */
   theme?: ExperienceThemeType;
+    /**
+   * color of title specially used in 'vertical' theme
+   */
+  historyTitleColor?: string;
+  headerTitleColor?: string;
+  dateColor?: string;
+  descriptionColor ?: string;
 }
 
-export interface ExperienceHistoryListType {
+export interface ExperienceHistoryListType extends ExperienceStyledPropsType{
   /**
    * Date when you started that kind experience
    */
@@ -41,17 +48,13 @@ export interface ExperienceHistoryListType {
 }
 
 export interface ExperienceVerticalOptionType {
-  /**
-   * color of title specially used in 'vertical' theme
-   */
-  titleColor?: string;
   /**
    * shape of card specially used in 'vertical' theme ('square' | 'round-square')
    */
   shape?: ExperienceShapeType;
 }
 
-export interface VerticalPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType {}
+export interface VerticalPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType, ExperienceStyledPropsType {}
 
 export interface IndexPropsType extends ExperienceHistoryListType, ExperienceVerticalOptionType {
   /**
@@ -66,10 +69,17 @@ type ExperienceShapeType = 'square' | 'round-square';
 /* For Styles */
 
 export interface ExperienceStyledPropsType {
+   /**
+   * color of title specially used in 'vertical' theme
+   */
+  historyTitleColor?: string;
   /**
    * Experience Text align (default: left)
    */
   textAlign?: string;
+  headerTitleColor?: string;
+  dateColor?: string;
+  descriptionColor ?: string;
 }
 
 export interface ExperienceChildStyledPropsType {

diff --git a/src/lib/common/types/ComponentTypes/VisitorCommentType.ts b/src/lib/common/types/ComponentTypes/VisitorCommentType.ts
@@ -64,9 +64,15 @@ export interface VisitorCommentPropsType {
   comment?: string;
   nickname?: string;
   password?: string;
+  listBackgroundColor?: string;
+  commentColor?: string;
+  inputFontColor?: string;
+  inputPlacehoderColor?: string;
+  listNicknameColor?: string;
+  listDateColor?: string;
 }
 
-export interface VisitorCommentListType {
+export interface VisitorCommentListType extends VisitorCommentStyledPropsType {
   /**
    * Description of your comment
    */
@@ -110,4 +116,10 @@ export interface VisitorCommentStyledPropsType {
   userInputLineColor?: string;
   scrollDownIconColor?: string;
   isOverflow?: boolean;
-}
+  listBackgroundColor?: string;
+  commentColor?: string;
+  inputFontColor?: string;
+  inputPlacehoderColor?: string;
+  listNicknameColor?: string;
+  listDateColor?: string;
+}
diff --git a/src/lib/components/Experience/Experience.tsx b/src/lib/components/Experience/Experience.tsx
@@ -12,7 +12,7 @@ import {
  * @props title: Main title text of Experience Component	(default: Experience)
  * @props textAlign: Experience Text align (default: left)
  * @props theme: You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'.	(default: basic)
- * @props titleColor: color of title specially used in 'vertical' theme
+ * @props historyTitleColor: color of title at historyList 
  * @props shape: shape of card specially used in 'vertical' theme ('square' | 'round-square')
  * @props historyList: You can add your history data such as date, title, description, etc.	({@link https://github.com/modern-agile-team/dev-portfolio/blob/master/app/src/lib/common/types/ComponentTypes/ExperienceType.ts#:~:text=export%20interface-,ExperienceHistoryListType,-%7B "See More about Experience's Props"})
  * @historyList startData: Date when you started that kind experience
@@ -21,15 +21,15 @@ import {
  * @historyList des: Describe about your experience
  */
 const Experience = (props: ExperiencePropsType) => {
-  const { id, historyList, title, textAlign, theme, titleColor, shape } = props;
+  const { id, historyList, title, textAlign, theme, historyTitleColor, shape, headerTitleColor, dateColor, descriptionColor } = props;
 
   return (
-    <Wrap id={id} textAlign={textAlign}>
+    <Wrap id={id} textAlign={textAlign} headerTitleColor={headerTitleColor}>
       <div className="title">{title}</div>
       <hr />
       <ChildWrap theme={theme}>
         {historyList?.map((elements, idx) => (
-          <History key={idx} {...elements} theme={theme} titleColor={titleColor} shape={shape} />
+          <History key={idx} {...elements} theme={theme} historyTitleColor={historyTitleColor} shape={shape} dateColor={dateColor} descriptionColor={descriptionColor} />
         ))}
       </ChildWrap>
     </Wrap>
@@ -69,6 +69,7 @@ const Wrap = styled.div<ExperienceStyledPropsType>`
     padding: 10px 10px 20px 10px;
     font-size: 33px;
     font-weight: 800;
+    color: ${({ headerTitleColor }) => headerTitleColor ?? 'black'};
   }
   hr {
     border: 0;

diff --git a/src/lib/components/Experience/History/Basic.tsx b/src/lib/components/Experience/History/Basic.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { ExperienceHistoryListType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { ExperienceHistoryListType, ExperienceStyledPropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Basic = (props: ExperienceHistoryListType) => {
-  const { startDate, endDate, title, des } = props;
+  const { startDate, endDate, title, des, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
     <div>
-      <Wrap>
+      <Wrap historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
         <div className="date">
           <span className="start-date">{startDate}</span>
           <span className="end-date">{endDate}</span>
@@ -19,7 +19,7 @@ const Basic = (props: ExperienceHistoryListType) => {
 };
 export default Basic;
 
-const Wrap = styled.div`
+const Wrap = styled.div<ExperienceStyledPropsType>`
   margin: 0 auto;
   padding: 0em 4vw;
   display: flex;
@@ -28,6 +28,7 @@ const Wrap = styled.div`
   flex-wrap: wrap;
   border-bottom: 0.2px solid #b4b4b4a2;
   .date {
+    color: ${({ dateColor }) => dateColor ?? 'black'};
     width: 15%;
     padding: 2em;
     flex-grow: 1;
@@ -46,6 +47,7 @@ const Wrap = styled.div`
     }
   }
   .child-title {
+    color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
     width: 15%;
     flex-grow: 1;
     font-size: 22px;
@@ -57,6 +59,7 @@ const Wrap = styled.div`
     }
   }
   .des {
+    color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
     padding: 2em;
     flex-grow: 2;
     width: 30%;

diff --git a/src/lib/components/Experience/History/Box.tsx b/src/lib/components/Experience/History/Box.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { ExperienceHistoryListType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { ExperienceHistoryListType, ExperienceStyledPropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Box = (props: ExperienceHistoryListType) => {
-  const { startDate, endDate, title, des } = props;
+  const { startDate, endDate, title, des, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
     <div>
-      <Wrap>
+      <Wrap historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
         <div className="date">
           <span className="start-date">{startDate}</span>
           <span className="end-date">{endDate}</span>
@@ -19,7 +19,7 @@ const Box = (props: ExperienceHistoryListType) => {
 };
 export default Box;
 
-const Wrap = styled.div`
+const Wrap = styled.div<ExperienceStyledPropsType>`
   margin: 10px;
   padding: 0em 4vw;
   display: flex;
@@ -32,6 +32,7 @@ const Wrap = styled.div`
     width: 15%;
     padding: 2em;
     flex-grow: 1;
+    color: ${({ dateColor }) => dateColor ?? 'black'};
     @media screen and (max-width: 800px) {
       width: 100%;
       text-align: center;
@@ -47,6 +48,7 @@ const Wrap = styled.div`
     }
   }
   .child-title {
+    color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
     width: 15%;
     flex-grow: 1;
     font-size: 22px;
@@ -59,6 +61,7 @@ const Wrap = styled.div`
     }
   }
   .des {
+    color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
     padding: 2em;
     flex-grow: 2;
     width: 30%;

diff --git a/src/lib/components/Experience/History/Vertical.tsx b/src/lib/components/Experience/History/Vertical.tsx
@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
-import { VerticalPropsType, ExperienceVerticalOptionType } from '../../../common/types/ComponentTypes/ExperienceType';
+import { VerticalPropsType, ExperiencePropsType } from '../../../common/types/ComponentTypes/ExperienceType';
 
 const Vertical = (props: VerticalPropsType) => {
-  const { startDate, endDate, title, des, shape, titleColor } = props;
+  const { startDate, endDate, title, des, shape, historyTitleColor, dateColor, descriptionColor } = props;
 
   return (
-    <Wrap shape={shape} titleColor={titleColor}>
+    <Wrap shape={shape} historyTitleColor={historyTitleColor} dateColor={dateColor} descriptionColor={descriptionColor}>
       <div className="intro">
         <div className="date">
           <span className="start-date">{startDate}</span>
@@ -22,10 +22,10 @@ export default Vertical;
 
 Vertical.defaultProps = {
   shape: 'square',
-  titleColor: 'black',
+  historyTitleColor: 'black',
 };
 
-const Wrap = styled.div<ExperienceVerticalOptionType>`
+const Wrap = styled.div<ExperiencePropsType>`
   width: 25em;
   padding: 10px 2em 1.2em 2em;
   margin: 1em auto;
@@ -47,6 +47,7 @@ const Wrap = styled.div<ExperienceVerticalOptionType>`
   .intro {
     margin: 10px;
     .date {
+      color: ${({ dateColor }) => dateColor ?? 'black'};
       margin: 15px 0px 10px 0px;
       font-size: 13px;
       .start-date {
@@ -60,11 +61,14 @@ const Wrap = styled.div<ExperienceVerticalOptionType>`
       }
     }
     .child-title {
-      color: ${({ titleColor }) => titleColor ?? 'black'};
+      color: ${({ historyTitleColor }) => historyTitleColor ?? 'black'};
       font-size: 25px;
       font-weight: 600;
       padding: 7px;
       border-bottom: 1px solid #b4b4b4a2;
     }
+    .des {
+      color: ${({ descriptionColor }) => descriptionColor ?? 'black'};
+    }
   }
 `;
diff --git a/src/lib/components/VisitorComment/CommentInput.tsx b/src/lib/components/VisitorComment/CommentInput.tsx
@@ -21,6 +21,8 @@ const CommentInput = (props: VisitorCommentPropsType) => {
     comment,
     nickname,
     password,
+    inputFontColor,
+    inputPlacehoderColor,
   } = props;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -33,7 +35,13 @@ const CommentInput = (props: VisitorCommentPropsType) => {
   };
 
   return (
-    <Wrap theme={theme} inputBackgroundColor={inputBackgroundColor} userInputLineColor={userInputLineColor}>
+    <Wrap
+      theme={theme}
+      inputBackgroundColor={inputBackgroundColor}
+      userInputLineColor={userInputLineColor}
+      inputFontColor={inputFontColor}
+      inputPlacehoderColor={inputPlacehoderColor}
+    >
       <textarea
         ref={textareaRef}
         onKeyDown={onKeyDown}
@@ -43,7 +51,7 @@ const CommentInput = (props: VisitorCommentPropsType) => {
         value={comment}
       />
       <InfoWrap>
-        <UserInfo>
+        <UserInfo inputPlacehoderColor={inputPlacehoderColor}>
           <input
             className="nickname"
             type="text"
@@ -83,6 +91,7 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   border: ${({ inputBackgroundColor }) => inputBackgroundColor ?? '0.2px solid #b4b4b4a2'};
   box-shadow: ${({ theme }) => (theme === 'box' ? '0px 0px 5px 0px rgba(83, 83, 83, 0.14)' : 'none')};
   textarea {
+    color: ${({ inputFontColor }) => inputFontColor ?? 'black'};
     background-color: ${({ inputBackgroundColor }) => inputBackgroundColor ?? 'white'};
     outline: none;
     border: none;
@@ -93,6 +102,9 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
     align-items: center;
     font-size: 16px;
     overflow: hidden;
+    ::placeholder {
+      color: ${({ inputPlacehoderColor }) => inputPlacehoderColor ?? 'black'};
+    }
     :focus::-webkit-input-placeholder {
       opacity: 0;
     }
@@ -106,6 +118,7 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   }
   input {
     background-color: ${({ inputBackgroundColor }) => inputBackgroundColor ?? 'white'};
+    color: ${({ inputFontColor }) => inputFontColor ?? 'black'};
     outline: none;
     border: none;
     padding: 0;
@@ -128,12 +141,17 @@ const Wrap = styled.div<VisitorCommentStyledPropsType>`
   }
 `;
 
-const UserInfo = styled.div`
+const UserInfo = styled.div<VisitorCommentStyledPropsType>`
   flex-grow: 3;
   display: flex;
   font-size: 14px;
   color: #959595;
   gap: 30px;
+  input {
+    ::placeholder {
+      color: ${({ inputPlacehoderColor }) => inputPlacehoderColor ?? 'black'};
+    }
+  }
   @media screen and (max-width: 500px) {
     flex-direction: row;
     width: 100%;
@@ -166,4 +184,4 @@ const SubmitBtn = styled.button<VisitorCommentStyledPropsType>`
 const InfoWrap = styled.div`
   display: flex;
   align-items: center;
-`;
+`;