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" } } }