Remove some variants of Badge

pagopa · Dec 19, 2024 · f72c7a1 · f72c7a1
1 parent b82bd38
commit f72c7a1
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 130 deletions.
diff --git a/example/src/pages/Badges.tsx b/example/src/pages/Badges.tsx
@@ -4,7 +4,6 @@ import {
   H4,
   hexToRgba,
   HStack,
-  IOBadgeRadius,
   IOColors,
   IOTagRadius,
   IOVisualCostants,
@@ -44,46 +43,25 @@ const renderBadge = () => (
       <VStack space={16}>
         <H4>Default</H4>
         <HStack space={8} style={{ flexWrap: "wrap" }}>
-          <Badge text={"Blue"} variant="blue" />
           <Badge text={"Default"} variant="default" />
-          <Badge text={"Info"} variant="info" />
           <Badge text={"Warning"} variant="warning" />
           <Badge text={"Error"} variant="error" />
           <Badge text={"Success"} variant="success" />
-          <Badge text={"Purple"} variant="purple" />
-          <Badge text={"Light blue"} variant="lightBlue" />
-          <Badge text={"Turquoise"} variant="turquoise" />
+          <Badge text={"Cgn"} variant="cgn" />
+          <Badge text={"Highlight"} variant="highlight" />
         </HStack>
       </VStack>
       <VStack space={16}>
         <H4>Outline</H4>
         <HStack space={8} style={{ flexWrap: "wrap" }}>
-          <Badge outline text={"Blue"} variant="blue" />
           <Badge outline text={"Default"} variant="default" />
-          <Badge outline text={"Info"} variant="info" />
           <Badge outline text={"Warning"} variant="warning" />
           <Badge outline text={"Error"} variant="error" />
           <Badge outline text={"Success"} variant="success" />
-          <Badge outline text={"Purple"} variant="purple" />
-          <Badge outline text={"Light blue"} variant="lightBlue" />
-          <Badge outline text={"Turquoise"} variant="turquoise" />
-          <Badge outline text={"Contrast"} variant="contrast" />
+          <Badge outline text={"Cgn"} variant="cgn" />
+          <Badge outline text={"Highlight"} variant="highlight" />
         </HStack>
       </VStack>
-      <VStack space={16}>
-        <H4>Contrast</H4>
-        <View
-          style={{
-            alignSelf: "flex-start",
-            backgroundColor: IOColors.bluegrey,
-            padding: 16,
-            borderRadius: IOBadgeRadius + 16,
-            borderCurve: "continuous"
-          }}
-        >
-          <Badge text={"Contrast"} variant="contrast" />
-        </View>
-      </VStack>
     </VStack>
   </>
 );

diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
@@ -163,7 +163,7 @@ const renderListItemNav = () => (
           topElement={{
             badgeProps: {
               text: "Novità",
-              variant: "blue"
+              variant: "default"
             }
           }}
         />
@@ -176,7 +176,7 @@ const renderListItemNav = () => (
           topElement={{
             badgeProps: {
               text: "Novità",
-              variant: "blue"
+              variant: "default"
             }
           }}
           hideChevron
@@ -475,7 +475,7 @@ const transactionStatusArray: Array<mockTransactionStatusData> = [
   },
   {
     badge: {
-      variant: "info",
+      variant: "default",
       text: "pending"
     },
     asset: { uri: organizationLogoURI.imageSource }
@@ -489,7 +489,7 @@ const transactionStatusArray: Array<mockTransactionStatusData> = [
   },
   {
     badge: {
-      variant: "lightBlue",
+      variant: "default",
       text: "reversal"
     },
     asset: "applePay"

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
@@ -251,7 +251,7 @@ const renderModuleCredential = () => (
           onPress={mockFn}
           badge={{
             text: "predefinita",
-            variant: "info"
+            variant: "default"
           }}
         />
       </View>
@@ -264,7 +264,7 @@ const renderModuleCredential = () => (
           onPress={mockFn}
           badge={{
             text: "predefinita",
-            variant: "info"
+            variant: "default"
           }}
         />
       </View>
@@ -320,7 +320,7 @@ const renderModuleNavigation = () => (
           onPress={mockFn}
           badge={{
             text: "In arrivo",
-            variant: "blue",
+            variant: "highlight",
             outline: true
           }}
         />
@@ -335,7 +335,7 @@ const renderModuleNavigation = () => (
           onPress={mockFn}
           badge={{
             text: "IN arrivo",
-            variant: "blue",
+            variant: "highlight",
             outline: true
           }}
         />

diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx
@@ -468,7 +468,7 @@ const ListItemSwitchShowroom = () => (
         value={false}
         badge={{
           text: "Attivo",
-          variant: "info"
+          variant: "default"
         }}
         description="Inquadra il codice QR mostrato dall’esercente e segui le istruzioni in app per autorizzare la spesa."
       />
@@ -478,7 +478,7 @@ const ListItemSwitchShowroom = () => (
         value={false}
         badge={{
           text: "Attivo",
-          variant: "info"
+          variant: "default"
         }}
       />
     </ComponentViewerBox>

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
@@ -13,28 +13,29 @@ import {
   IOBadgeVSpacing,
   IOColors,
   useIOExperimentalDesign,
-  useIOTheme,
   useIOThemeContext
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
 
+/* 
+NOTE FOR REFACTORING in the `io-app`:
+
+- default (legacy) -> removed
+- blue -> Deleted -> replaced with `default`
+- info -> removed -> highlight?
+- purple -> cgn
+- turquoise -> highlight
+- contrast -> removed
+- lightBlue -> default
+*/
+
 export type Badge = WithTestID<{
   outline?: boolean;
   text: string;
   allowFontScaling?: boolean;
-  variant:
-    | "default"
-    | "info"
-    | "warning"
-    | "error"
-    | "success"
-    | "purple"
-    | "lightBlue"
-    | "blue"
-    | "turquoise"
-    | "contrast";
+  variant: "default" | "warning" | "error" | "success" | "cgn" | "highlight";
 }>;
 
 type SolidVariantProps = {
@@ -77,7 +78,6 @@ export const Badge = ({
   testID
 }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
-  const theme = useIOTheme();
   const { dynamicFontScale } = useIOFontDynamicScale();
   const { themeType } = useIOThemeContext();
 
@@ -88,12 +88,8 @@ export const Badge = ({
     SolidVariantProps
   > = {
     default: {
-      foreground: "grey-700",
-      background: IOColors["grey-50"]
-    },
-    info: {
-      foreground: "info-850",
-      background: IOColors["info-100"]
+      foreground: "blueIO-850",
+      background: IOColors["blueIO-50"]
     },
     warning: {
       foreground: "warning-850",
@@ -107,25 +103,13 @@ export const Badge = ({
       foreground: "error-850",
       background: IOColors["error-100"]
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-500",
       background: IOColors["hanPurple-100"]
     },
-    lightBlue: {
-      foreground: "blueIO-850",
-      background: IOColors["blueIO-50"]
-    },
-    blue: {
-      foreground: "white",
-      background: IOColors[theme["interactiveElem-default"]]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-850",
       background: IOColors["turquoise-50"]
-    },
-    contrast: {
-      foreground: "grey-700",
-      background: IOColors.white
     }
   };
 
@@ -134,12 +118,8 @@ export const Badge = ({
     SolidVariantProps
   > = {
     default: {
-      foreground: "grey-50",
-      background: hexToRgba(IOColors["grey-50"], bgOpacityDarkMode)
-    },
-    info: {
-      foreground: "info-400",
-      background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode)
+      foreground: "blueIO-200",
+      background: hexToRgba(IOColors["blueIO-200"], bgOpacityDarkMode)
     },
     warning: {
       foreground: "warning-400",
@@ -153,25 +133,13 @@ export const Badge = ({
       foreground: "error-400",
       background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode)
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-250",
       background: hexToRgba(IOColors["hanPurple-250"], bgOpacityDarkMode)
     },
-    lightBlue: {
-      foreground: "blueIO-200",
-      background: hexToRgba(IOColors["blueIO-600"], bgOpacityDarkMode)
-    },
-    blue: {
-      foreground: "white",
-      background: IOColors[theme["interactiveElem-default"]]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-300",
       background: hexToRgba(IOColors["turquoise-300"], bgOpacityDarkMode)
-    },
-    contrast: {
-      foreground: "grey-700",
-      background: IOColors.white
     }
   };
 
@@ -180,10 +148,7 @@ export const Badge = ({
     OutlinedVariantProps
   > = {
     default: {
-      foreground: "grey-700"
-    },
-    info: {
-      foreground: "info-850"
+      foreground: "blueIO-850"
     },
     warning: {
       foreground: "warning-850"
@@ -194,20 +159,11 @@ export const Badge = ({
     error: {
       foreground: "error-850"
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-500"
     },
-    lightBlue: {
-      foreground: "blueIO-850"
-    },
-    blue: {
-      foreground: theme["interactiveElem-default"]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-850"
-    },
-    contrast: {
-      foreground: "grey-850"
     }
   };
 
@@ -216,10 +172,7 @@ export const Badge = ({
     OutlinedVariantProps
   > = {
     default: {
-      foreground: "grey-100"
-    },
-    info: {
-      foreground: "info-400"
+      foreground: "blueIO-200"
     },
     warning: {
       foreground: "warning-400"
@@ -230,20 +183,11 @@ export const Badge = ({
     error: {
       foreground: "error-400"
     },
-    purple: {
+    cgn: {
       foreground: "hanPurple-250"
     },
-    lightBlue: {
-      foreground: "blueIO-150"
-    },
-    blue: {
-      foreground: theme["interactiveElem-default"]
-    },
-    turquoise: {
+    highlight: {
       foreground: "turquoise-300"
-    },
-    contrast: {
-      foreground: "grey-100"
     }
   };
 

diff --git a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
         "paddingVertical": 4,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#E7ECFC",
       },
     ]
   }
@@ -31,7 +31,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
       [
         {},
         {
-          "color": "#555C70",
+          "color": "#031344",
           "fontFamily": "Titillio",
           "fontSize": 12,
           "fontStyle": "normal",
@@ -69,7 +69,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
         "paddingVertical": 4,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#E7ECFC",
       },
     ]
   }
@@ -83,7 +83,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
       [
         {},
         {
-          "color": "#555C70",
+          "color": "#031344",
           "fontFamily": "Titillium Sans Pro",
           "fontSize": 12,
           "fontStyle": "normal",

diff --git a/src/components/modules/ModulePaymentNotice.tsx b/src/components/modules/ModulePaymentNotice.tsx
@@ -85,7 +85,7 @@ const ModulePaymentNoticeContent = ({
       case "canceled":
         return <Badge variant="default" text={badgeText} />;
       case "in-progress":
-        return <Badge variant="info" text={badgeText} />;
+        return <Badge variant="default" text={badgeText} />;
     }
   };