feat(contact): add style props about contact compoent #164

1. titleColor 2. subTitleColor 3. buttonTextColor 4. buttonColor 5. buttonBorderColor
modern-agile-team · Oct 2, 2022 · 04ee596 · 04ee596
1 parent 3e976e1
commit 04ee596
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 19 deletions.
diff --git a/src/lib/common/types/ComponentTypes/Contact/ContactType.ts b/src/lib/common/types/ComponentTypes/Contact/ContactType.ts
@@ -1,26 +1,27 @@
 import { ChannelsPropsType } from '../ChannelType';
 import { AboutMeInfoPropsType } from './AboutMeInfoType';
 
-export interface ContactPropsType extends ContactOptionType {
+export interface ContactPropsType extends ChannelsPropsType {
   /**
    * Name to be added to Sidebar
    */
   id?: string;
-  /**
-   * Contact background color	style (default: 'whitesmoke')
-   */
-  backgroundColor?: string;
-}
-
-export interface ContactOptionType extends ChannelsPropsType {
   /**
    * Main title text of your contacts (default: 'Hello, my name is DEV_PORTFOLIO')
    */
   title?: string;
+  /**
+   * Title color style (defualt: 'black')
+   */
+  titleColor?: string;
   /**
    * Sub title text (default: 'If you're interested in me, please press the button below :D')
    */
   subTitle?: string;
+  /**
+   * Sub title text color style (defualt: 'black')
+   */
+  subTitleColor?: string;
   /**
    * Your Email (default: 'abc@dev-portfolio.com')
    */
@@ -29,6 +30,22 @@ export interface ContactOptionType extends ChannelsPropsType {
    * Text of button that function as a link to your email (default: 'Want to work with me?')
    */
   buttonText?: string;
+  /**
+   * Button text color style (defualt: 'black')
+   */
+  buttonTextColor?: string;
+  /**
+   * Button background color style (default: 'white')
+   */
+  buttonColor?: string;
+  /**
+   * Button border color sylte (default: 'black')
+   */
+  buttonBorderColor?: string;
+  /**
+   * Contact background color	style (default: 'whitesmoke')
+   */
+  backgroundColor?: string;
   /**
    * Enter your personal informations such as TEL, home address, etc.
    *

diff --git a/src/lib/components/Contact/Contact.tsx b/src/lib/components/Contact/Contact.tsx
@@ -11,9 +11,14 @@ import { ContactPropsType, ContactStyledPropsType } from '../../common/types/Com
  * @props id: Name to be added to Sidebar
  * @props backgroundColor: Contact background color	style (default: 'whitesmoke')
  * @props title: Main title text of your contacts (default: 'Hello, my name is DEV_PORTFOLIO')
+ * @props titleColor: Title color style (defualt: 'black')
  * @props subTitle: Sub title text (default: 'If you're interested in me, please press the button below :D')
+ * @props subTitleColor: Sub title text color style (defualt: 'black')
  * @props email: Your Email (default: 'abc@dev-portfolio.com')
  * @props buttonText: Text of button that function as a link to your email (default: 'Want to work with me?')
+ * @props buttonTextColor: Button text color style (defualt: 'black')
+ * @props buttonColor: Button background color style (default: 'white')
+ * @props buttonBorderColor: Button border color sylte (default: 'black')
  *
  * @props channels: Enter channels to express yourself, such as personal blog, linked-in, etc.
  * @props aboutMeInfos: Enter your personal informations such as TEL, home address, etc.
@@ -23,17 +28,33 @@ import { ContactPropsType, ContactStyledPropsType } from '../../common/types/Com
  */
 const Contact = ({
   id,
-  backgroundColor,
   title,
+  titleColor,
   subTitle,
+  subTitleColor,
   email,
   buttonText,
+  buttonTextColor,
+  buttonColor,
+  buttonBorderColor,
+  backgroundColor,
   channels,
   aboutMeInfos,
 }: ContactPropsType) => {
   return (
     <Container id={id} backgroundColor={backgroundColor}>
-      <ContactForm title={title} subTitle={subTitle} email={email} buttonText={buttonText} channels={channels} />
+      <ContactForm
+        title={title}
+        titleColor={titleColor}
+        subTitle={subTitle}
+        subTitleColor={subTitleColor}
+        email={email}
+        buttonText={buttonText}
+        buttonTextColor={buttonTextColor}
+        buttonColor={buttonColor}
+        buttonBorderColor={buttonBorderColor}
+        channels={channels}
+      />
       <AboutMe aboutMeInfos={aboutMeInfos} />
     </Container>
   );
@@ -54,8 +75,13 @@ const Container = styled.div<ContactStyledPropsType>`
 
 Contact.defaultProps = {
   title: 'Hello, my name is DEV_PORTFOLIO',
+  titleColor: 'black',
   subTitle: `If you're interested in me, please press the button below :D`,
+  subTitleColor: 'black',
   buttonText: 'Want to work with me?',
+  buttonTextColor: 'black',
+  buttonColor: 'white',
+  buttonBorderColor: 'black',
   email: 'abc@dev-portfolio.com',
   channels: [
     {

diff --git a/src/lib/components/Contact/ContactForm.tsx b/src/lib/components/Contact/ContactForm.tsx
@@ -1,16 +1,34 @@
 import styled from 'styled-components';
-import { ContactOptionType } from '../../common/types/ComponentTypes/Contact/ContactType';
+import { ContactPropsType } from '../../common/types/ComponentTypes/Contact/ContactType';
 import Channels from '../Channels/Channels';
 
-const ContactForm = ({ title, subTitle, buttonText, channels, email }: ContactOptionType) => {
+const ContactForm = ({
+  title,
+  titleColor,
+  subTitle,
+  subTitleColor,
+  buttonText,
+  buttonTextColor,
+  buttonColor,
+  buttonBorderColor,
+  channels,
+  email,
+}: ContactPropsType) => {
   return (
     <Container>
       <Channels channels={channels} />
       <TitleContainer>
-        <Title>{title}</Title>
-        <span>{subTitle}</span>
+        <Title titleColor={titleColor}>{title}</Title>
+        <SubTitle subTitleColor={subTitleColor}>{subTitle}</SubTitle>
       </TitleContainer>
-      <SendEmailButton href={`mailto:${email}`}>{buttonText?.length ? buttonText : email}</SendEmailButton>
+      <SendEmailButton
+        href={`mailto:${email}`}
+        buttonTextColor={buttonTextColor}
+        buttonColor={buttonColor}
+        buttonBorderColor={buttonBorderColor}
+      >
+        {buttonText?.length ? buttonText : email}
+      </SendEmailButton>
     </Container>
   );
 };
@@ -34,18 +52,25 @@ const TitleContainer = styled.div`
   flex-direction: column;
 `;
 
-const Title = styled.div`
+const Title = styled.div<ContactPropsType>`
   font-weight: bold;
   font-size: 18px;
+  color: ${({ titleColor }) => titleColor};
 `;
 
-const SendEmailButton = styled.a`
-  color: black;
+const SubTitle = styled.span<ContactPropsType>`
+  color: ${({ subTitleColor }) => subTitleColor};
+`;
+
+const SendEmailButton = styled.a<ContactPropsType>`
+  color: ${({ buttonTextColor }) => buttonTextColor};
+  background-color: ${({ buttonColor }) => buttonColor};
+
   padding: 10px 10px;
   text-decoration: none;
   text-align: center;
   border-radius: 4px;
-  border: 0.5px solid #00000033;
+  border: 0.5px solid ${({ buttonBorderColor }) => buttonBorderColor};
   cursor: pointer;
   &:hover {
     transform: scale(1.02);