diff --git a/example/src/pages/Badges.tsx b/example/src/pages/Badges.tsx
index 88c8b86d..2accb322 100644
--- 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 = () => (
Default
-
-
-
-
-
+
+
Outline
-
-
-
-
-
-
+
+
-
- Contrast
-
-
-
-
>
);
diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
index e8a85a4d..9beab353 100644
--- 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 = [
},
{
badge: {
- variant: "info",
+ variant: "default",
text: "pending"
},
asset: { uri: organizationLogoURI.imageSource }
@@ -489,7 +489,7 @@ const transactionStatusArray: Array = [
},
{
badge: {
- variant: "lightBlue",
+ variant: "default",
text: "reversal"
},
asset: "applePay"
diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index 550bad09..1a1d76ef 100644
--- 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"
}}
/>
@@ -264,7 +264,7 @@ const renderModuleCredential = () => (
onPress={mockFn}
badge={{
text: "predefinita",
- variant: "info"
+ variant: "default"
}}
/>
@@ -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
index 408f779b..70516bf1 100644
--- 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"
}}
/>
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 8c43da40..08181a12 100644
--- 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
index 86f8bfa7..f01a7822 100644
--- 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
index d12de6ad..a26842db 100644
--- a/src/components/modules/ModulePaymentNotice.tsx
+++ b/src/components/modules/ModulePaymentNotice.tsx
@@ -85,7 +85,7 @@ const ModulePaymentNoticeContent = ({
case "canceled":
return ;
case "in-progress":
- return ;
+ return ;
}
};
diff --git a/stories/components/badge/Badge.stories.tsx b/stories/components/badge/Badge.stories.tsx
index 1d6e6438..a919fd85 100644
--- a/stories/components/badge/Badge.stories.tsx
+++ b/stories/components/badge/Badge.stories.tsx
@@ -31,10 +31,10 @@ export const Warning: Story = {
}
};
-export const Contrast: Story = {
+export const Error: Story = {
args: {
text: "Attenzione",
- variant: "contrast"
+ variant: "error"
}
};
@@ -54,10 +54,10 @@ export const OutlineWarning: Story = {
}
};
-export const OutlineContrast: Story = {
+export const OutlineError: Story = {
args: {
text: "Attenzione",
outline: true,
- variant: "contrast"
+ variant: "error"
}
};
diff --git a/stories/components/listItems/ListItemInfo.stories.ts b/stories/components/listItems/ListItemInfo.stories.ts
index c1ea6613..833369eb 100644
--- a/stories/components/listItems/ListItemInfo.stories.ts
+++ b/stories/components/listItems/ListItemInfo.stories.ts
@@ -36,7 +36,7 @@ export const WithBadge: Story = {
type: "badge",
componentProps: {
text: "Badge",
- variant: "info"
+ variant: "default"
}
},
accessibilityLabel: "Tap to trigger test alert"
diff --git a/stories/components/listItems/ListItemNav.stories.ts b/stories/components/listItems/ListItemNav.stories.ts
index cfee9f25..a18bad5c 100644
--- a/stories/components/listItems/ListItemNav.stories.ts
+++ b/stories/components/listItems/ListItemNav.stories.ts
@@ -36,7 +36,7 @@ export const WithBadge: Story = {
topElement: {
badgeProps: {
text: "Badge",
- variant: "info"
+ variant: "default"
}
}
}