feat(skill): add props such as borderColor, backgroundColor,

borderRadius #164
modern-agile-team · Oct 2, 2022 · ec6d7bf · ec6d7bf
1 parent 7a4ca4f
commit ec6d7bf
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/lib/common/types/ComponentTypes/SkillType.ts b/src/lib/common/types/ComponentTypes/SkillType.ts
@@ -14,7 +14,7 @@ export interface SkillPropsType {
   /**
    * If this value is set to True, you can hide the title. (default: false)
    */
-  isHiddenTitle?: string;
+  isHiddenTitle?: boolean;
   /**
    * Enter the name of the icon you searched on the following site. (default: 'ion:logo-javascript') {@link https://icon-sets.iconify.design/}
    */
@@ -35,4 +35,16 @@ export interface SkillPropsType {
    * Skill padding style (defualt: '0px')
    */
   padding?: string;
+  /**
+   * Skill background color style (default: 'white')
+   */
+  backgroundColor?: string;
+  /**
+   * Skill border color style (default: 'white')
+   */
+  borderColor?: string;
+  /**
+   * Skill border-radius style (default: '12px')
+   */
+  borderRadius?: string;
 }
diff --git a/src/lib/components/Skill/Skill.tsx b/src/lib/components/Skill/Skill.tsx
@@ -14,6 +14,9 @@ import { SkillPropsType } from '../../common/types/ComponentTypes/SkillType';
  * @props iconColor: Icon color style (default: '#F0DB4F')
  * @props margin: Skill margin style (defualt: '0px')
  * @props padding: Skill padding style (defualt: '0px')
+ * @props backgroundColor: Skill background color style (default: 'white')
+ * @props borderColor: Skill border color style (default: 'white')
+ * @props borderRadius: Skill border-radius style (default: '12px')
  */
 const Skill = ({
   title,
@@ -25,9 +28,18 @@ const Skill = ({
   iconColor,
   margin,
   padding,
+  backgroundColor,
+  borderColor,
+  borderRadius,
 }: SkillPropsType) => {
   return (
-    <Container margin={margin} padding={padding}>
+    <Container
+      margin={margin}
+      padding={padding}
+      backgroundColor={backgroundColor}
+      borderColor={borderColor}
+      borderRadius={borderRadius}
+    >
       <Icon icon={`${iconName?.toLowerCase()}`} fontSize={iconSize} color={iconColor} />
       <Name titleSize={titleSize} titleColor={titleColor} isHiddenTitle={isHiddenTitle}>
         {title}
@@ -48,13 +60,20 @@ Skill.defaultProps = {
   iconColor: '#F0DB4F',
   margin: '0px',
   padding: '0px',
+  backgroundColor: 'white',
+  borderColor: 'white',
+  borderRadius: '12px',
 };
 
-const Container = styled.div<SkillPropsType>`
+const Container = styled.span<SkillPropsType>`
   display: flex;
+  flex-direction: row;
   align-items: center;
   margin: ${({ margin }) => margin};
   padding: ${({ padding }) => padding};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border: 1px solid ${({ borderColor }) => borderColor};
+  border-radius: ${({ borderRadius }) => borderRadius};
 `;
 
 const Name = styled.span<SkillPropsType>`