feat(image): add props in Image such as subheadColor etc. #164

1. subheadSize 2. subheadColor 3. headSize 4. headWeight 5. headColor
modern-agile-team · Oct 2, 2022 · a6dec1d · a6dec1d
1 parent fb591bd
commit a6dec1d
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 50 deletions.
diff --git a/src/lib/common/types/ComponentTypes/ImageType.ts b/src/lib/common/types/ComponentTypes/ImageType.ts
@@ -1,13 +1,46 @@
 export interface ImagePropsType {
-  src: string;
+  /**
+   * Image source url. (default: {@link https://picsum.photos/300/300/?random})
+   */
+  src?: string;
+  /**
+   * Sub title text.	(default: 'Write your subhead')
+   */
   subhead?: string;
+  /**
+   * subhead text size style. (default: '14px')
+   */
+  subheadSize?: string;
+  /**
+   * subhead text color size style. (default: 'black')
+   */
+  subheadColor?: string;
+  /**
+   * Main title text.	(default: 'Write your head')
+   */
   head?: string;
+  /**
+   * head text size style. (default: '20px')
+   */
+  headSize?: string;
+  /**
+   * head text weight style. (default: '700')
+   */
+  headWeight?: string;
+  /**
+   * head color style. (default: 'black')
+   */
+  headColor?: string;
+  /**
+   * URL you want to redirect when clicked. (default: '/')
+   */
   redirectURL?: string;
+  /**
+   * If this value is set to True, you can hide the head text. (default: false)
+   */
   noShowHead?: boolean;
-  zoomWhenHover?: boolean;
-}
-
-export interface ImageItemsStyledPropsType {
-  noShowHead?: boolean;
+  /**
+   * If this value is set to True, you can zoom image when hovered on item. (default: true)
+   */
   zoomWhenHover?: boolean;
 }
diff --git a/src/lib/components/Image/Image.tsx b/src/lib/components/Image/Image.tsx
@@ -1,27 +1,52 @@
 import styled from 'styled-components';
-import { MAIN } from '../../common/theme';
-import { ImagePropsType, ImageItemsStyledPropsType } from '../../common/types/ComponentTypes/ImageType';
+import { ImagePropsType } from '../../common/types/ComponentTypes/ImageType';
 
 /**
+ * Express the section you want to brag about using Image component.
  *
- * @props src: Image source url
- * @props head: Main Title Text	(default: Write your head)
- * @props subhead: Sub Title Text	(default: Write your subhead)
- * @props redirectURL: URL to redirect	(default: /)
- * @props noShowHead: Flag for whether to hide texts (default: false)
- * @props zoomWhenHover: Flag for whether to zoom image when hovered on item (default: false)
+ * @props src: Image source url. (default: {@link https://picsum.photos/300/300/?random})
+ * @props subhead: Sub title text.	(default: 'Write your subhead')
+ * @props subheadSize: subhead text size style. (default: '14px')
+ * @props subheadColor: subhead text color size style. (default: 'black')
+ * @props head: Main title text.	(default: 'Write your head')
+ * @props headSize: head text size style. (default: '20px')
+ * @props headWeight: head text weight style. (default: '700')
+ * @props headColor: head color style. (default: 'black')
+ * @props redirectURL: URL you want to redirect when clicked. (default: '/')
+ * @props noShowHead: If this value is set to True, you can hide the head text. (default: false)
+ * @props zoomWhenHover: If this value is set to True, you can zoom image when hovered on image. (default: true)
  */
-const Image = ({ src, subhead, head, redirectURL, noShowHead, zoomWhenHover }: ImagePropsType) => {
+const Image = ({
+  src,
+  subhead,
+  subheadSize,
+  subheadColor,
+  head,
+  headSize,
+  headWeight,
+  headColor,
+  redirectURL,
+  noShowHead,
+  zoomWhenHover,
+}: ImagePropsType) => {
   return (
     <Wrap>
-      <Items noShowHead={noShowHead} zoomWhenHover={zoomWhenHover}>
+      <Items
+        subheadSize={subheadSize}
+        subheadColor={subheadColor}
+        headSize={headSize}
+        headWeight={headWeight}
+        headColor={headColor}
+        noShowHead={noShowHead}
+        zoomWhenHover={zoomWhenHover}
+      >
         <a href={redirectURL}>
           <div className="imgWrap">
             <img src={src} />
           </div>
           <div className="imgDes">
-            <p>{subhead}</p>
-            <span>{head}</span>
+            <p className="subhead">{subhead}</p>
+            <div className="head">{head}</div>
           </div>
         </a>
       </Items>
@@ -32,56 +57,64 @@ const Image = ({ src, subhead, head, redirectURL, noShowHead, zoomWhenHover }: I
 export default Image;
 
 Image.defaultProps = {
+  src: 'https://picsum.photos/300/300/?random',
   subhead: 'Write your subhead',
-  head: 'script your head',
+  subheadSize: '14px',
+  subheadColor: 'black',
+  head: 'Write your head',
+  headSize: '20px',
+  headWeight: '700',
+  headColor: 'black',
   redirectURL: '/',
+  noShowHead: false,
+  zoomWhenHover: true,
 };
 
 const Wrap = styled.div`
   display: flex;
   justify-content: center;
   display: inline;
+  color: red;
 `;
 
-const Items = styled.div<ImageItemsStyledPropsType>`
+const Items = styled.div<ImagePropsType>`
   display: inline-block;
   width: 100%;
-  margin-bottom: ${({ noShowHead }) => (noShowHead ? 0 : '0.5em')};
+  margin-bottom: ${({ noShowHead }) => (noShowHead ? 0 : '1.2em')};
   a {
     text-decoration-line: none;
-  }
-  .imgWrap {
-    overflow: hidden;
-  }
-  img {
-    width: 100%;
-    transition: 0.6s;
-    object-fit: cover;
-    display: block;
-    :hover {
-      transform: ${({ zoomWhenHover }) => (zoomWhenHover ? 'scale(105%)' : 'none')};
+
+    .imgWrap {
+      overflow: hidden;
     }
-  }
-  .imgDes {
-    display: ${({ noShowHead }) => (noShowHead ? 'none' : 'inline')};
-    p {
-      margin: 5px 0px 2px 1px;
-      font-size: 14px;
-      @media screen and (max-width: 800px) {
-        font-size: 1.5vw;
+    img {
+      width: 100%;
+      transition: 0.6s;
+      object-fit: cover;
+      display: block;
+      :hover {
+        transform: ${({ zoomWhenHover }) => (zoomWhenHover ? 'scale(105%)' : 'none')};
       }
     }
-    span {
-      font-size: 22px;
-      font-weight: 800;
-      @media screen and (max-width: 800px) {
-        font-size: 1.5vw;
+    .imgDes {
+      display: ${({ noShowHead }) => (noShowHead ? 'none' : 'inline')};
+      .subhead {
+        margin: 5px 0px 1px 1px;
+        font-size: ${({ subheadSize }) => subheadSize};
+        color: ${({ subheadColor }) => subheadColor};
+        @media screen and (max-width: 800px) {
+          font-size: 1.5vw;
+        }
       }
-    }
-    color: black;
-    margin-bottom: 10px;
-    :hover {
-      color: ${MAIN.MAIN_COLOR};
+      .head {
+        font-size: ${({ headSize }) => headSize};
+        font-weight: ${({ headWeight }) => headWeight};
+        color: ${({ headColor }) => headColor};
+        @media screen and (max-width: 800px) {
+          font-size: 1.5vw;
+        }
+      }
+      margin-bottom: 10px;
     }
   }
 `;