fix: refactor code

nexxtway · Jul 14, 2020 · 5823c2e · 5823c2e
1 parent e55cbdb
commit 5823c2e
Showing 1 changed file with 5 additions and 25 deletions.
diff --git a/src/components/Chip/styled/container.js b/src/components/Chip/styled/container.js
@@ -4,6 +4,7 @@ import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 import { PADDING_SMALL } from '../../../styles/paddings';
 import { FONT_SIZE_TEXT_MEDIUM } from '../../../styles/fontSizes';
 
+const variants = ['brand', 'success', 'warning', 'error'];
 const StyledContainer = attachThemeAttrs(styled.span)`
     display: inline-flex;
     align-items: center;
@@ -36,32 +37,11 @@ const StyledContainer = attachThemeAttrs(styled.span)`
             color: ${props.palette.brand.main};
         `};
     ${props =>
-        props.variant === 'brand' &&
+        variants.includes(props.variant) &&
         `
-            background-color: ${props.palette.brand.main};
-            border: 1px solid ${props.palette.brand.main};
-            color: ${props.palette.getContrastText(props.palette.brand.main)};
-        `};
-    ${props =>
-        props.variant === 'success' &&
-        `
-            background-color: ${props.palette.success.main};
-            border: 1px solid ${props.palette.success.main};
-            color: ${props.palette.getContrastText(props.palette.success.main)};
-        `};
-    ${props =>
-        props.variant === 'warning' &&
-        `
-            background-color: ${props.palette.warning.main};
-            border: 1px solid ${props.palette.warning.main};
-            color: ${props.palette.getContrastText(props.palette.warning.main)};
-        `};
-    ${props =>
-        props.variant === 'error' &&
-        `
-            background-color: ${props.palette.error.main};
-            border: 1px solid ${props.palette.error.main};
-            color: ${props.palette.getContrastText(props.palette.error.main)};
+            background-color: ${props.palette[props.variant].main};
+            border: 1px solid ${props.palette[props.variant].main};
+            color: ${props.palette.getContrastText(props.palette[props.variant].main)};
         `};
 `;