[IOPLT-180] Add the Outlined variant on Badge component (#113)

## Short description
This PR implements the badge variant for outlined representation

## List of changes proposed in this pull request
- Changes Badge component

## How to test
Check the example app under `Badges & Tags` screen

<img
src="https://github.com/pagopa/io-app-design-system/assets/3959405/b926af9b-702a-4f9a-a4a1-953dcbd9864b"
height="600"/>

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,

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"
@@ -25,12 +26,12 @@ export type Badge = WithTestID<{
     | "contrast";
 }>;
 
-type VariantProps = {
-  foreground: IOColors;
+type SolidVariantProps = {
   background: IOColors;
+  foreground: IOColors;
 };
 
-const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
+const mapVariants: Record<NonNullable<Badge["variant"]>, SolidVariantProps> = {
   default: {
     foreground: "grey-700",
     background: "grey-50"
@@ -73,6 +74,47 @@ const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
   }
 };
 
+type OutlinedVariantProps = {
+  foreground: IOColors;
+  background?: never;
+};
+
+const mapOutlineVariants: Record<
+  NonNullable<Badge["variant"]>,
+  OutlinedVariantProps
+> = {
+  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 +148,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 +176,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}