Merge pull request #322 from cjdev/badge

khoberg · web-flow · commit 0fad21cbccad · 2021-02-18T09:44:59.000-08:00
Update and add new Badge variants
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# Upcoming
+
+## Updates
+
+- Add new Badge variants
+
 # 7.0.2
 
 ## Fix
diff --git a/packages/visual-stack-docs/src/containers/Components/Docs/badge.js b/packages/visual-stack-docs/src/containers/Components/Docs/badge.js
@@ -34,13 +34,15 @@ export default () => (
             <Body>
               {/* s3:start */}
               <Box direction="row" gap="default">
-                <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>
+                <Badge variant="1">One</Badge>
+                <Badge variant="2">Two</Badge>
+                <Badge variant="3">Three</Badge>
+                <Badge variant="4">Four</Badge>
+                <Badge variant="5">Five</Badge>
+                <Badge variant="6">Six</Badge>
+                <Badge variant="7">Seven</Badge>
+                <Badge variant="8">Eight</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
@@ -12,30 +12,38 @@
   height: fit-content;
 }
 
-.vs-badge-variant-default {
-  background-color: #6d7684;
-}
-
 .vs-badge-variant-cj-green {
   background-color: #49c5b1;
 }
 
 .vs-badge-variant-1 {
-  background-color: #9c52f7;
+  background-color: #6d7684;
 }
 
 .vs-badge-variant-2 {
-  background-color: #ea4b93;
+  background-color: #7824b6;
 }
 
 .vs-badge-variant-3 {
-  background-color: #4574e2;
+  background-color: #2a76c6;
 }
 
 .vs-badge-variant-4 {
-  background-color: #0caaac;
+  background-color: #1eb1c1;
 }
 
 .vs-badge-variant-5 {
-  background-color: #072477;
+  background-color: #28b189;
+}
+
+.vs-badge-variant-6 {
+  background-color: #e88700;
+}
+
+.vs-badge-variant-7 {
+  background-color: #d9166b;
+}
+
+.vs-badge-variant-8 {
+  background-color: #df49d8;
 }
diff --git a/packages/visual-stack/src/components/Badge/index.js b/packages/visual-stack/src/components/Badge/index.js
@@ -20,11 +20,21 @@ export const Badge = ({ children, className, variant, ...restProps }) => {
 };
 
 Badge.defaultProps = {
-  variant: 'default',
+  variant: '1',
 };
 
 Badge.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  variant: PropTypes.oneOf(['default', 'cj-green', '1', '2', '3', '4', '5']),
+  variant: PropTypes.oneOf([
+    'cj-green',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+  ]),
 };
diff --git a/packages/visual-stack/src/components/Badge/tests/index.test.js b/packages/visual-stack/src/components/Badge/tests/index.test.js
@@ -1,17 +1,32 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { Badge } from '..';
 
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
 describe('Badge', () => {
-  const el = document.createElement('div');
-  document.body.appendChild(el);
-
-  test('should render children', () => {
-    const wrapper = mount(<Badge>CONTENT CERTIFIED</Badge>);
-    expect(wrapper.find(Badge).text()).toEqual('CONTENT CERTIFIED');
+  it('should render with default variant', () => {
+    const wrapper = shallow(<Badge>CONTENT CERTIFIED</Badge>);
+    expect(wrapper.find('.vs-badge')).toHaveLength(1);
+    expect(wrapper.find('.vs-badge.vs-badge-variant-1')).toHaveLength(1);
+    expect(
+      wrapper
+        .find('.vs-badge.vs-badge-variant-1')
+        .children(0)
+        .text()
+    ).toEqual('CONTENT CERTIFIED');
+  });
+  it('should render with specified variant', () => {
+    const wrapper = shallow(<Badge variant="2">TEST</Badge>);
+    expect(wrapper.find('.vs-badge')).toHaveLength(1);
+    expect(wrapper.find('.vs-badge.vs-badge-variant-2')).toHaveLength(1);
+    expect(
+      wrapper
+        .find('.vs-badge.vs-badge-variant-2')
+        .children(0)
+        .text()
+    ).toEqual('TEST');
   });
 });
