From b1e059b9e5d655d41b4c95dd1fcc13f54efa8d69 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Thu, 19 Oct 2023 15:50:09 +0200
Subject: [PATCH 1/2] Add the Outlined variant on Badge component

---
 example/src/pages/Badges.tsx   | 21 ++++++++++++
 src/components/badge/Badge.tsx | 61 +++++++++++++++++++++++++++++++---
 2 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/example/src/pages/Badges.tsx b/example/src/pages/Badges.tsx
index 6aa03a7f..1d4a9d44 100644
--- a/example/src/pages/Badges.tsx
+++ b/example/src/pages/Badges.tsx
@@ -62,6 +62,27 @@ const renderBadge = () => (
       <HSpacer size={16} />
     </View>
     <VSpacer size={16} />
+    <View style={IOStyles.row}>
+      <Badge outline text={"Info"} variant="info" />
+      <HSpacer size={16} />
+      <Badge outline text={"Warning"} variant="warning" />
+      <HSpacer size={16} />
+      <Badge outline text={"Error"} variant="error" />
+      <HSpacer size={16} />
+      <Badge outline text={"Success"} variant="success" />
+    </View>
+    <VSpacer size={16} />
+    <View style={IOStyles.row}>
+      <Badge outline text={"Purple"} variant="purple" />
+      <HSpacer size={16} />
+      <Badge outline text={"Light blue"} variant="lightBlue" />
+      <HSpacer size={16} />
+      <Badge outline text={"Blue"} variant="blue" />
+      <HSpacer size={16} />
+      <Badge outline text={"Turquoise"} variant="turquoise" />
+      <HSpacer size={16} />
+    </View>
+    <VSpacer size={16} />
     <View
       style={{
         backgroundColor: IOColors.bluegrey,
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 9a1be7d3..eda99be8 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import {
   IOBadgeHSpacing,
@@ -11,6 +11,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 
 export type Badge = WithTestID<{
+  outline?: boolean;
   text: string;
   variant:
     | "default"
@@ -27,7 +28,7 @@ export type Badge = WithTestID<{
 
 type VariantProps = {
   foreground: IOColors;
-  background: IOColors;
+  background?: IOColors;
 };
 
 const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
@@ -73,6 +74,42 @@ const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
   }
 };
 
+const mapOutlineVariants: Record<
+  NonNullable<Badge["variant"]>,
+  VariantProps
+> = {
+  default: {
+    foreground: "grey-700"
+  },
+  info: {
+    foreground: "info-850"
+  },
+  warning: {
+    foreground: "warning-850"
+  },
+  success: {
+    foreground: "success-850"
+  },
+  error: {
+    foreground: "error-850"
+  },
+  purple: {
+    foreground: "hanPurple-850"
+  },
+  lightBlue: {
+    foreground: "blueIO-850"
+  },
+  blue: {
+    foreground: "blueIO-500"
+  },
+  turquoise: {
+    foreground: "turquoise-850"
+  },
+  contrast: {
+    foreground: "grey-850"
+  }
+};
+
 const styles = StyleSheet.create({
   badge: {
     flexDirection: "row",
@@ -106,14 +143,26 @@ const styles = StyleSheet.create({
 /**
  * Official badge component
  */
-export const Badge = ({ text, variant, testID }: Badge) => {
+export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
+  const { background, foreground } = useMemo(
+    () => (outline ? mapOutlineVariants : mapVariants)[variant],
+    [outline, variant]
+  );
+
   return (
     <View
       testID={testID}
       style={[
         styles.badge,
-        { backgroundColor: IOColors[mapVariants[variant].background] }
+        outline
+          ? {
+              borderWidth: 1,
+              borderColor: IOColors[foreground]
+            }
+          : {
+              backgroundColor: background ? IOColors[background] : undefined
+            }
       ]}
     >
       <Text
@@ -122,7 +171,9 @@ export const Badge = ({ text, variant, testID }: Badge) => {
         style={[
           styles.label,
           isExperimental ? styles.labelFont : styles.legacyLabelFont,
-          { color: IOColors[mapVariants[variant].foreground] }
+          {
+            color: IOColors[foreground]
+          }
         ]}
       >
         {text}

From 5274d7a80e3b3cf19eddd9c9262d0e321e092609 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Mon, 23 Oct 2023 10:15:06 +0200
Subject: [PATCH 2/2] type fix

---
 src/components/badge/Badge.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index eda99be8..7398a212 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -26,12 +26,12 @@ export type Badge = WithTestID<{
     | "contrast";
 }>;
 
-type VariantProps = {
+type SolidVariantProps = {
+  background: IOColors;
   foreground: IOColors;
-  background?: IOColors;
 };
 
-const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
+const mapVariants: Record<NonNullable<Badge["variant"]>, SolidVariantProps> = {
   default: {
     foreground: "grey-700",
     background: "grey-50"
@@ -74,9 +74,14 @@ const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
   }
 };
 
+type OutlinedVariantProps = {
+  foreground: IOColors;
+  background?: never;
+};
+
 const mapOutlineVariants: Record<
   NonNullable<Badge["variant"]>,
-  VariantProps
+  OutlinedVariantProps
 > = {
   default: {
     foreground: "grey-700"