Badge color inversion (#171)

* adds color inversion support for badges * adds color inversion support for badge
BreezeChMS · Sep 21, 2021 · d775fd7 · d775fd7
1 parent 35426c6
commit d775fd7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 4 deletions.
diff --git a/src/components/Badge/Badge.js b/src/components/Badge/Badge.js
@@ -43,6 +43,7 @@ export const Badge = ({
     variant,
     size,
     isRounded,
+    hasColorInverted,
     onRemove,
     ...rest
 }) => {
@@ -56,6 +57,7 @@ export const Badge = ({
                 size,
                 variant,
                 isRounded ? "round" : "square",
+                hasColorInverted && "inverted",
                 className
             )}
             {...rest}>
@@ -89,6 +91,8 @@ Badge.propTypes = {
     size: PropTypes.oneOf(Object.keys(sizes)),
     /** Creates a fully rounded badge */
     isRounded: PropTypes.bool,
+    /** Inverts color scheme (text/background reversed) */
+    hasColorInverted: PropTypes.bool,
 };
 
 Badge.defaultProps = {

diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
@@ -47,6 +47,15 @@
         svg {
             color: $mainsail-blue-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-blue-middle;
+            color: $mainsail-blue-light;
+
+            svg {
+                color: $mainsail-blue-light;
+            }
+        }
     }
 
     &.green {
@@ -56,6 +65,15 @@
         svg {
             color: $mainsail-green-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-green-middle;
+            color: $mainsail-green-light;
+
+            svg {
+                color: $mainsail-green-light;
+            }
+        }
     }
 
     &.violet {
@@ -65,6 +83,15 @@
         svg {
             color: $mainsail-violet-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-violet-middle;
+            color: $mainsail-violet-light;
+
+            svg {
+                color: $mainsail-violet-light;
+            }
+        }
     }
 
     &.orange {
@@ -74,6 +101,15 @@
         svg {
             color: $mainsail-orange-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-orange-middle;
+            color: $mainsail-orange-light;
+
+            svg {
+                color: $mainsail-orange-light;
+            }
+        }
     }
 
     &.pink {
@@ -83,6 +119,15 @@
         svg {
             color: $mainsail-pink-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-pink-middle;
+            color: $mainsail-pink-light;
+
+            svg {
+                color: $mainsail-pink-light;
+            }
+        }
     }
 
     &.red {
@@ -92,6 +137,15 @@
         svg {
             color: $mainsail-red-middle;
         }
+
+        &.inverted {
+            background-color: $mainsail-red-middle;
+            color: $mainsail-red-light;
+
+            svg {
+                color: $mainsail-red-light;
+            }
+        }
     }
 
     &.neutral {
@@ -101,6 +155,15 @@
         svg {
             color: $mainsail-neutral-2;
         }
+
+        &.inverted {
+            background-color: $mainsail-neutral-2;
+            color: $mainsail-neutral-5;
+
+            svg {
+                color: $mainsail-neutral-5;
+            }
+        }
     }
 
     &.removable {

diff --git a/src/components/Badge/Badge.stories.js b/src/components/Badge/Badge.stories.js
@@ -33,6 +33,13 @@ Basic.args = {
     variant: BadgeComponent.variants.basic,
 };
 
+export const InvertedColor = Badge.bind({});
+InvertedColor.args = {
+    text: "Badge",
+    hasColorInverted: true,
+    variant: BadgeComponent.variants.basic,
+};
+
 export const Round = Badge.bind({});
 Round.args = {
     text: "Badge",

diff --git a/src/components/Badge/Badge.test.js b/src/components/Badge/Badge.test.js
@@ -5,17 +5,26 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/extend-expect";
 
-import { Basic, Round, Removable } from "./Badge.stories";
+import { Basic, InvertedColor, Round, Removable } from "./Badge.stories";
 
 it("renders the badge in the primary state", () => {
     render(<Basic {...Basic.args} />);
-    expect(screen.getByText("Badge")).toBeInTheDocument();
+    expect(screen.getByText(Basic.args.text)).toBeInTheDocument();
+});
+
+it("renders the badge in with inverted color", () => {
+    render(<InvertedColor {...InvertedColor.args} />);
+    expect(
+        screen.getByText(InvertedColor.args.text).classList.contains("inverted")
+    ).toBeTruthy();
 });
 
 it("renders the badge with the round style", () => {
     render(<Round {...Round.args} />);
-    expect(screen.getByText("Badge")).toBeInTheDocument();
-    expect(screen.getByText("Badge").classList.contains("round")).toBe(true);
+    expect(screen.getByText(Basic.args.text)).toBeInTheDocument();
+    expect(screen.getByText(Basic.args.text).classList.contains("round")).toBe(
+        true
+    );
 });
 
 it("fires a provided onRemove handler", () => {