Refactor to use variants instead of hardcoded colors

nicolasfont · nicolasfont · commit 20ccfcb972e4 · 2021-01-28T14:52:34.000-08:00
diff --git a/packages/visual-stack-docs/src/containers/Components/Docs/badge.js b/packages/visual-stack-docs/src/containers/Components/Docs/badge.js
@@ -16,30 +16,14 @@ export default () => (
               <Snippet tag="s1" src={snippets} />
             </Body>
           </Panel>
-          <Panel>
-            <Body>
-              {/* s4:start */}
-              <Box direction="row" gap="default">
-                <Badge>CJ Performer</Badge>
-                <Badge>CJ Spotlight</Badge>
-                <Badge>Content Certified</Badge>
-                <Badge>New to Network</Badge>
-                <Badge>SubAffiliate</Badge>
-              </Box>
-              {/* s4:end */}
-              <Snippet tag="s4" src={snippets} />
-            </Body>
-          </Panel>
-
           <Panel>
             <Body>
               {/* s2:start */}
               <Box direction="row" gap="default">
-                <Badge backgroundColor="#9C52F7">CJ Performer</Badge>
-                <Badge backgroundColor="#EA4B93">CJ Spotlight</Badge>
-                <Badge backgroundColor="#4574E2">Content Certified</Badge>
-                <Badge backgroundColor="#0CAAAC">New to Network</Badge>
-                <Badge backgroundColor="#072477">SubAffiliate</Badge>
+                <Badge>1</Badge>
+                <Badge>2</Badge>
+                <Badge>3</Badge>
+                <Badge>4819</Badge>
               </Box>
               {/* s2:end */}
               <Snippet tag="s2" src={snippets} />
@@ -50,10 +34,13 @@ export default () => (
             <Body>
               {/* s3:start */}
               <Box direction="row" gap="default">
-                <Badge backgroundColor="var(--cj-green)">1</Badge>
-                <Badge backgroundColor="var(--cj-green)">2</Badge>
-                <Badge backgroundColor="var(--cj-green)">3</Badge>
-                <Badge backgroundColor="var(--cj-green)">4819</Badge>
+                <Badge variant="default">0</Badge>
+                <Badge variant="cj-green">CJ Green</Badge>
+                <Badge variant="1">CJ Performer</Badge>
+                <Badge variant="2">CJ Spotlight</Badge>
+                <Badge variant="3">Content Certified</Badge>
+                <Badge variant="4">New to Network</Badge>
+                <Badge variant="5">SubAffiliate</Badge>
               </Box>
               {/* s3:end */}
               <Snippet tag="s3" src={snippets} />
diff --git a/packages/visual-stack/src/components/Badge/Badge.css b/packages/visual-stack/src/components/Badge/Badge.css
@@ -4,11 +4,38 @@
   line-height: 1rem;
   border-radius: 0.2rem;
   display: inline-block;
-  background-color: #6d7684;
   color: #ffffff;
   padding: 0.2rem 0.4rem;
   text-align: center;
   text-transform: uppercase;
   width: fit-content;
   height: fit-content;
 }
+
+.vs-badge-variant-default {
+  background-color: #6d7684;
+}
+
+.vs-badge-variant-cj-green {
+  background-color: var(--cj-green);
+}
+
+.vs-badge-variant-1 {
+  background-color: #9c52f7;
+}
+
+.vs-badge-variant-2 {
+  background-color: #ea4b93;
+}
+
+.vs-badge-variant-3 {
+  background-color: #4574e2;
+}
+
+.vs-badge-variant-4 {
+  background-color: #0caaac;
+}
+
+.vs-badge-variant-5 {
+  background-color: #072477;
+}
diff --git a/packages/visual-stack/src/components/Badge/index.js b/packages/visual-stack/src/components/Badge/index.js
@@ -4,30 +4,27 @@ import React from 'react';
 import './Badge.css';
 import Box from '../../experimental/Box';
 
-export const Badge = ({
-  children,
-  className,
-  backgroundColor,
-  color,
-  ...restProps
-}) => {
+export const Badge = ({ children, className, variant, ...restProps }) => {
   return (
     <Box
       {...restProps}
-      className={classNames('vs-badge', className)}
-      style={{
-        backgroundColor,
-        color,
-      }}
+      className={classNames(
+        'vs-badge',
+        `vs-badge-variant-${variant}`,
+        className
+      )}
     >
       {children}
     </Box>
   );
 };
 
+Badge.defaultProps = {
+  variant: 'default',
+};
+
 Badge.propTypes = {
-  backgroundColor: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
-  color: PropTypes.string,
+  variant: PropTypes.oneOf('default', 'cj-green', '1', '2', '3', '4', '5'),
 };
