From db6a8229c0a087aee8f510e7d679eb9fd85ac59b Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 17 Oct 2024 15:27:27 +0200 Subject: [PATCH 01/22] Remove legacy `AdviceComponent` --- ts/components/AdviceComponent.tsx | 45 ------------------- .../design-system/core/DSLegacyAdvice.tsx | 7 --- .../screens/IbanEnrollmentScreen.tsx | 32 ++++--------- .../screens/InstrumentsEnrollmentScreen.tsx | 9 ++-- 4 files changed, 13 insertions(+), 80 deletions(-) delete mode 100644 ts/components/AdviceComponent.tsx diff --git a/ts/components/AdviceComponent.tsx b/ts/components/AdviceComponent.tsx deleted file mode 100644 index 92f2763bab0..00000000000 --- a/ts/components/AdviceComponent.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from "react"; -import { View, StyleSheet } from "react-native"; -import { - Icon, - IOIcons, - IOIconSizeScale, - IOColors, - HSpacer -} from "@pagopa/io-app-design-system"; -import { IOStyles } from "./core/variables/IOStyles"; -import { Body } from "./core/typography/Body"; - -type Props = { - text: string; - iconName?: IOIcons; - iconSize?: IOIconSizeScale; - iconColor?: IOColors; -}; - -const styles = StyleSheet.create({ - icon: { - marginTop: 4 - } -}); - -const defaultIconSize: IOIconSizeScale = 20; -/** - * This component displays an info icon on top-left and a text message - * @constructor - */ -const AdviceComponent: React.FunctionComponent = (props: Props) => ( - - - - - - {props.text} - -); - -export default React.memo(AdviceComponent); diff --git a/ts/features/design-system/core/DSLegacyAdvice.tsx b/ts/features/design-system/core/DSLegacyAdvice.tsx index b71cf33e08c..b77ab59bf35 100644 --- a/ts/features/design-system/core/DSLegacyAdvice.tsx +++ b/ts/features/design-system/core/DSLegacyAdvice.tsx @@ -7,7 +7,6 @@ import { DSFullWidthComponent } from "../components/DSFullWidthComponent"; /* Types */ import { ImportoEuroCents } from "../../../../definitions/backend/ImportoEuroCents"; -import AdviceComponent from "../../../components/AdviceComponent"; import { Body } from "../../../components/core/typography/Body"; import { H5 } from "../../../components/core/typography/H5"; import { Label } from "../../../components/core/typography/Label"; @@ -28,12 +27,6 @@ const styles = StyleSheet.create({ export const DSLegacyAdvice = () => ( - - diff --git a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx index 22e6bb44cdc..4ce44e3101a 100644 --- a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx @@ -1,18 +1,15 @@ import { + FeatureInfo, FooterWithButtons, - HSpacer, - Icon, VSpacer } from "@pagopa/io-app-design-system"; import { RouteProp, useFocusEffect, useRoute } from "@react-navigation/native"; import React from "react"; -import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native"; +import { SafeAreaView, ScrollView, StyleSheet } from "react-native"; import { IbanDTO } from "../../../../../definitions/idpay/IbanDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; -import { LabelSmall } from "../../../../components/core/typography/LabelSmall"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import ListItemComponent from "../../../../components/screens/ListItemComponent"; import I18n from "../../../../i18n"; @@ -188,21 +185,14 @@ export const IbanEnrollmentScreen = () => { {renderIbanList()} - {/* TODO:: AdviceComponent goes here once implemented @dmnplb */} - - - - - {isSettingsVisibleAndHideProfile + - - {/* TODO:: end AdviceComponent */} + : I18n.t("idpay.configuration.iban.enrollment.legacyFooter") + } + /> {renderFooter()} @@ -214,9 +204,5 @@ const styles = StyleSheet.create({ container: { flex: 1, padding: customVariables.contentPadding - }, - bottomSection: { - flexDirection: "row", - alignItems: "center" } }); diff --git a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx index 0a010a11096..f1f5d1d92ad 100644 --- a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx @@ -1,4 +1,5 @@ import { + FeatureInfo, FooterWithButtons, IOStyles, VSpacer @@ -8,7 +9,6 @@ import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; import { ScrollView } from "react-native"; -import AdviceComponent from "../../../../components/AdviceComponent"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; @@ -19,6 +19,7 @@ import ROUTES from "../../../../navigation/routes"; import { Wallet } from "../../../../types/pagopa"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet"; +import { isLoadingSelector } from "../../common/machine/selectors"; import { InstrumentEnrollmentSwitch } from "../components/InstrumentEnrollmentSwitch"; import { IdPayConfigurationMachineContext } from "../machine/provider"; import { @@ -32,7 +33,6 @@ import { import { IdPayConfigurationParamsList } from "../navigation/params"; import { ConfigurationMode } from "../types"; import { InitiativeFailureType } from "../types/failure"; -import { isLoadingSelector } from "../../common/machine/selectors"; export type IdPayInstrumentsEnrollmentScreenParams = { initiativeId?: string; @@ -281,10 +281,9 @@ export const InstrumentsEnrollmentScreen = () => { /> ))} - From 0a5f7d089e7e6bb6001cd4a0ad2223301d7d5e1a Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 17 Oct 2024 15:37:56 +0200 Subject: [PATCH 02/22] Remove `RawAccordion` --- ts/components/FAQComponent.tsx | 30 ---- ts/components/core/accordion/RawAccordion.tsx | 120 ---------------- .../accordion/__test__/RawAccordion.test.tsx | 129 ------------------ ts/components/ui/Accordion.tsx | 95 ------------- .../design-system/core/DSLegacyAccordion.tsx | 59 -------- .../design-system/navigation/navigator.tsx | 9 -- .../design-system/navigation/params.ts | 1 - .../design-system/navigation/routes.ts | 4 - .../payment/TransactionSummaryScreen.tsx | 10 -- .../TransactionSummaryErrorDetails.tsx | 113 --------------- 10 files changed, 570 deletions(-) delete mode 100644 ts/components/FAQComponent.tsx delete mode 100644 ts/components/core/accordion/RawAccordion.tsx delete mode 100644 ts/components/core/accordion/__test__/RawAccordion.test.tsx delete mode 100644 ts/components/ui/Accordion.tsx delete mode 100644 ts/features/design-system/core/DSLegacyAccordion.tsx delete mode 100644 ts/screens/wallet/payment/components/TransactionSummaryErrorDetails.tsx diff --git a/ts/components/FAQComponent.tsx b/ts/components/FAQComponent.tsx deleted file mode 100644 index 661110b23aa..00000000000 --- a/ts/components/FAQComponent.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from "react"; -import { ComponentProps } from "react"; -import { FAQType } from "../utils/faq"; -import Accordion from "./ui/Accordion"; -import LegacyMarkdown from "./ui/Markdown/LegacyMarkdown"; - -type Props = Readonly<{ - faqs: ReadonlyArray; - onLinkClicked?: ComponentProps["onLinkClicked"]; - shouldHandleLink?: ComponentProps["shouldHandleLink"]; -}>; - -/** - * @deprecated This component is not used anymore and will be removed in future releases. - */ -const FAQComponent: React.FunctionComponent = (props: Props) => ( - <> - {props.faqs.map((faqType: FAQType, i: number) => ( - - ))} - -); - -export default FAQComponent; diff --git a/ts/components/core/accordion/RawAccordion.tsx b/ts/components/core/accordion/RawAccordion.tsx deleted file mode 100644 index 6696861abbe..00000000000 --- a/ts/components/core/accordion/RawAccordion.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import * as React from "react"; -import { useEffect, useRef, useState } from "react"; -import { - View, - AccessibilityProps, - Animated, - Easing, - LayoutAnimation, - StyleSheet, - TouchableWithoutFeedback, - UIManager -} from "react-native"; -import { Icon } from "@pagopa/io-app-design-system"; -import I18n from "../../../i18n"; -import customVariables from "../../../theme/variables"; -import { isAndroid } from "../../../utils/platform"; -import { IOStyles } from "../variables/IOStyles"; - -// TODO: handle external initial open/closed state -type Props = { - // The header component, an arrow indicating the open/closed state will be added on the right - header: React.ReactElement; - // The accordion component must accept one children - children: React.ReactElement; - // The component should be animated? default: true - animated?: boolean; - headerStyle?: React.ComponentProps["style"]; - accessibilityLabel?: AccessibilityProps["accessibilityLabel"]; -}; - -const styles = StyleSheet.create({ - headerIcon: { - alignSelf: "center" - }, - row: { - ...IOStyles.row, - justifyContent: "space-between" - }, - internalHeader: { - flex: 1, - paddingRight: customVariables.contentPadding - } -}); - -/** - * Obtains the degree starting from the open state - * @param isOpen - */ -const getDegree = (isOpen: boolean) => (isOpen ? "-90deg" : "-270deg"); - -/** - * The base accordion component, implements the opening and closing logic for viewing the children - * @param props - * @constructor - */ -export const RawAccordion: React.FunctionComponent = props => { - const [isOpen, setOpen] = useState(false); - const animatedController = useRef(new Animated.Value(1)).current; - const shouldAnimate = props.animated ?? true; - const headerStyle = props.headerStyle ?? {}; - const accessibilityLabel = props.accessibilityLabel - ? `${props.accessibilityLabel}, ` - : ""; - - const arrowAngle = shouldAnimate - ? animatedController.interpolate({ - inputRange: [0, 1], - outputRange: ["0deg", "-180deg"] - }) - : getDegree(isOpen); - - useEffect(() => { - if (isAndroid) { - UIManager.setLayoutAnimationEnabledExperimental(shouldAnimate); - } - }, [shouldAnimate]); - - const onPress = () => { - if (shouldAnimate) { - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); - Animated.timing(animatedController, { - duration: 300, - toValue: isOpen ? 1 : 0, - useNativeDriver: true, - easing: Easing.linear - }).start(); - } - setOpen(!isOpen); - }; - - return ( - - - - {props.header} - - - - - - {isOpen && props.children} - - ); -}; diff --git a/ts/components/core/accordion/__test__/RawAccordion.test.tsx b/ts/components/core/accordion/__test__/RawAccordion.test.tsx deleted file mode 100644 index 38b37c94750..00000000000 --- a/ts/components/core/accordion/__test__/RawAccordion.test.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import { IOColors } from "@pagopa/io-app-design-system"; -import { fireEvent, render } from "@testing-library/react-native"; -import * as React from "react"; -import { View } from "react-native"; -import I18n from "../../../../i18n"; -import { Body } from "../../typography/Body"; -import { H3 } from "../../typography/H3"; -import { IOStyles } from "../../variables/IOStyles"; -import { RawAccordion } from "../RawAccordion"; - -const bodyText = "This is a body text"; -const headerText = "This is an header text"; - -describe("RawAccordion", () => { - jest.useFakeTimers(); - - // eslint-disable-next-line sonarjs/cognitive-complexity - describe("When a RawAccordion is rendered for the first time", () => { - it("Should be in the closed state", () => { - const res = renderRawAccordion(); - expect(res.queryByText(headerText)).not.toBeNull(); - expect(res.queryByText(bodyText)).toBeNull(); - }); - describe("And the header is tapped", () => { - it("Should expand and display the content", () => { - const res = renderRawAccordion(); - const header = res.queryByText(headerText); - if (header !== null) { - fireEvent.press(header); - expect(res.queryByText(headerText)).not.toBeNull(); - expect(res.queryByText(bodyText)).not.toBeNull(); - } else { - fail("header not found"); - } - }); - describe("And the header is tapped again", () => { - it("Should close and hide the content", () => { - const res = renderRawAccordion(); - const header = res.queryByText(headerText); - if (header !== null) { - fireEvent.press(header); - fireEvent.press(header); - expect(res.queryByText(bodyText)).toBeNull(); - } else { - fail("header not found"); - } - }); - }); - }); - describe("And no accessibilityLabel is used", () => { - it("Should use only global.accessibility.collapsed", () => { - const res = renderRawAccordion(); - expect( - res.queryByA11yLabel(I18n.t("global.accessibility.collapsed")) - ).not.toBeNull(); - }); - describe("And the header is tapped", () => { - it("Should use only global.accessibility.expanded", () => { - const res = renderRawAccordion(); - const header = res.queryByText(headerText); - if (header !== null) { - fireEvent.press(header); - expect( - res.queryByA11yLabel(I18n.t("global.accessibility.expanded")) - ).not.toBeNull(); - } else { - fail("header not found"); - } - }); - }); - }); - describe("Accessibility", () => { - describe("And an accessibilityLabel is used", () => { - it("Should use accessibilityLabel and global.accessibility.collapsed", () => { - const res = renderRawAccordion({ - accessibilityLabel: "CustomAccessibilityLabel" - }); - expect( - res.queryByA11yLabel( - `CustomAccessibilityLabel, ${I18n.t( - "global.accessibility.collapsed" - )}` - ) - ).not.toBeNull(); - }); - describe("And the header is tapped", () => { - it("Should use accessibilityLabel and global.accessibility.expanded", () => { - const res = renderRawAccordion({ - accessibilityLabel: "CustomAccessibilityLabel" - }); - const header = res.queryByText(headerText); - if (header !== null) { - fireEvent.press(header); - expect( - res.queryByA11yLabel( - `CustomAccessibilityLabel, ${I18n.t( - "global.accessibility.expanded" - )}` - ) - ).not.toBeNull(); - } else { - fail("header not found"); - } - }); - }); - }); - }); - }); -}); - -const renderRawAccordion = ( - props?: Pick, "accessibilityLabel"> -) => - render( - -

{headerText}

- - } - > - {bodyText} - - ); diff --git a/ts/components/ui/Accordion.tsx b/ts/components/ui/Accordion.tsx deleted file mode 100644 index eb7f11e073a..00000000000 --- a/ts/components/ui/Accordion.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Icon } from "@pagopa/io-app-design-system"; -import * as O from "fp-ts/lib/Option"; -import { pipe } from "fp-ts/lib/function"; -import * as React from "react"; -import { ComponentProps } from "react"; -import { StyleSheet, View } from "react-native"; -import I18n from "../../i18n"; -import customVariables from "../../theme/variables"; -import ItemSeparatorComponent from "../ItemSeparatorComponent"; -import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; -import { Body } from "../core/typography/Body"; -import { IOStyles } from "../core/variables/IOStyles"; -import LegacyMarkdown from "./Markdown/LegacyMarkdown"; - -type Props = { - title: string; - content: string; - onLinkClicked?: ComponentProps["onLinkClicked"]; - shouldHandleLink?: ComponentProps["shouldHandleLink"]; -}; - -const styles = StyleSheet.create({ - header: { - flexDirection: "row", - justifyContent: "space-between", - paddingVertical: customVariables.spacerHeight - }, - pad: { - paddingVertical: customVariables.spacerHeight - } -}); - -/** - * - * @param props - * @constructor - * @deprecated Please use {@link RawAccordion} - */ -const Accordion: React.FunctionComponent = (props: Props) => { - const [expanded, setExpanded] = React.useState(false); - - const renderHeader = (title: string) => ( - setExpanded(!expanded)} - > - - - {title} - - - - - - {!expanded && } - - ); - - const renderContent = (content: string) => ( - - { - pipe( - props.onLinkClicked, - O.fromNullable, - O.map(s => s(url)) - ); - }} - > - {content} - - - ); - - return ( - <> - {renderHeader(props.title)} - {expanded && renderContent(props.content)} - - ); -}; - -export default Accordion; diff --git a/ts/features/design-system/core/DSLegacyAccordion.tsx b/ts/features/design-system/core/DSLegacyAccordion.tsx deleted file mode 100644 index 67a389fa150..00000000000 --- a/ts/features/design-system/core/DSLegacyAccordion.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { IOColors, Icon, VSpacer } from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { View } from "react-native"; -import { RawAccordion } from "../../../components/core/accordion/RawAccordion"; -import { Body } from "../../../components/core/typography/Body"; -import { H3 } from "../../../components/core/typography/H3"; -import { H5 } from "../../../components/core/typography/H5"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { DesignSystemScreen } from "../components/DesignSystemScreen"; - -export const DSLegacyAccordion = () => ( - - {renderRawAccordion()} - -); - -const renderRawAccordion = () => ( - <> -

RawAccordion

- - - - -

{"Custom header "}

-
{"Purgatorio, Canto VI"}
- - } - > - - {"Ahi serva Italia, di dolore ostello, \n" + - "nave sanza nocchiere in gran tempesta, \n" + - "non donna di province, ma bordello!" + - "\n\n" + - "Quell’anima gentil fu così presta, \n" + - "sol per lo dolce suon de la sua terra, \n" + - "di fare al cittadin suo quivi festa;" + - "\n\n" + - "e ora in te non stanno sanza guerra \n" + - "li vivi tuoi, e l’un l’altro si rode \n" + - "di quei ch’un muro e una fossa serra." + - "\n\n" + - "Cerca, misera, intorno da le prode \n" + - "le tue marine, e poi ti guarda in seno, \n" + - "s’alcuna parte in te di pace gode." + - "\n\n" + - "Che val perché ti racconciasse il freno \n" + - "Iustiniano, se la sella è vota? \n" + - "Sanz’esso fora la vergogna meno."} - - - - -); diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx index d8defdc67ea..e36b806cae2 100644 --- a/ts/features/design-system/navigation/navigator.tsx +++ b/ts/features/design-system/navigation/navigator.tsx @@ -49,7 +49,6 @@ import { DSIOScrollViewWithListItems } from "../core/DSIOScrollViewWithListItems import { DSIOScrollViewWithoutActions } from "../core/DSIOScrollViewWithoutActions"; import { DSIcons } from "../core/DSIcons"; import { DSLayout } from "../core/DSLayout"; -import { DSLegacyAccordion } from "../core/DSLegacyAccordion"; import { DSLegacyAdvice } from "../core/DSLegacyAdvice"; import { DSLegacyAlert } from "../core/DSLegacyAlert"; import { DSLegacyBadges } from "../core/DSLegacyBadges"; @@ -633,14 +632,6 @@ export const DesignSystemNavigator = () => { }} /> - - { organizationFiscalCode={organizationFiscalCode} isPaid={isPaid} /> - - {showsInlineError && pot.isError(paymentVerification) && ( - - )} diff --git a/ts/screens/wallet/payment/components/TransactionSummaryErrorDetails.tsx b/ts/screens/wallet/payment/components/TransactionSummaryErrorDetails.tsx deleted file mode 100644 index 438c4169b9e..00000000000 --- a/ts/screens/wallet/payment/components/TransactionSummaryErrorDetails.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import * as O from "fp-ts/lib/Option"; -import * as React from "react"; -import { ButtonOutline, Divider } from "@pagopa/io-app-design-system"; -import { View } from "react-native"; -import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson"; -import { RawAccordion } from "../../../../components/core/accordion/RawAccordion"; -import { H4 } from "../../../../components/core/typography/H4"; -import I18n from "../../../../i18n"; -import customVariables from "../../../../theme/variables"; -import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard"; -import { isDuplicatedPayment } from "../../../../utils/payment"; -import { TransactionSummaryError } from "../TransactionSummaryScreen"; -import { TransactionSummaryRow } from "./TransactionSummary"; - -type Props = Readonly<{ - error: TransactionSummaryError; - paymentNoticeNumber: string; - organizationFiscalCode: string; - messageId: string | undefined; -}>; - -export const TransactionSummaryErrorDetails = ({ - error, - paymentNoticeNumber, - organizationFiscalCode, - messageId -}: React.PropsWithChildren): React.ReactElement | null => { - const errorOrUndefined = O.toUndefined(error); - if ( - errorOrUndefined === undefined || - isDuplicatedPayment(error) || - !Object.keys(Detail_v2Enum).includes(errorOrUndefined) - ) { - return null; - } - - const messageData: ReadonlyArray<{ key: string; value?: string }> = [ - { - key: I18n.t("payment.noticeCode"), - value: paymentNoticeNumber - }, - { - key: I18n.t("wallet.firstTransactionSummary.entityCode"), - value: organizationFiscalCode - } - ]; - const detailsData: ReadonlyArray<{ key: string; value?: string }> = [ - { - key: I18n.t("wallet.firstTransactionSummary.errorDetails.errorCode"), - value: errorOrUndefined - }, - { - key: I18n.t("wallet.firstTransactionSummary.errorDetails.messageId"), - value: messageId - } - ]; - - const clipboardString = [...messageData, ...detailsData] - .reduce( - (acc: ReadonlyArray, curr: { key: string; value?: string }) => { - if (curr.value) { - return [...acc, `${curr.key}: ${curr.value}`]; - } - return acc; - }, - [] - ) - .join(", "); - return ( - - {I18n.t("wallet.firstTransactionSummary.errorDetails.title")} - } - headerStyle={{ - paddingTop: customVariables.spacerLargeHeight, - paddingBottom: customVariables.spacerSmallHeight - }} - accessibilityLabel={I18n.t( - "wallet.firstTransactionSummary.errorDetails.title" - )} - > - - - {detailsData.map((row, index, array) => - row.value !== undefined ? ( - <> - - {index !== array.length - 1 && } - - ) : undefined - )} - - clipboardSetStringWithFeedback(clipboardString)} - fullWidth - /> - - - - - ); -}; From ac5f2621c52d02ca2b280530280a040b098fa95c Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 17 Oct 2024 16:17:08 +0200 Subject: [PATCH 03/22] Remove `DetailedlistItemComponent` --- ts/components/DetailedlistItemComponent.tsx | 168 ------------------ .../design-system/core/DSLegacyListItems.tsx | 18 -- 2 files changed, 186 deletions(-) delete mode 100644 ts/components/DetailedlistItemComponent.tsx diff --git a/ts/components/DetailedlistItemComponent.tsx b/ts/components/DetailedlistItemComponent.tsx deleted file mode 100644 index a4ae69c500f..00000000000 --- a/ts/components/DetailedlistItemComponent.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from "react"; -import { View, StyleSheet } from "react-native"; -import { Icon } from "@pagopa/io-app-design-system"; -import customVariables from "../theme/variables"; -import I18n from "../i18n"; -import { BadgeComponent } from "./screens/BadgeComponent"; -import TouchableDefaultOpacity from "./TouchableDefaultOpacity"; -import { H5 } from "./core/typography/H5"; -import { H3 } from "./core/typography/H3"; -import { Body } from "./core/typography/Body"; -import { IOBadge } from "./core/IOBadge"; -import { IOStyles } from "./core/variables/IOStyles"; -import { Label } from "./core/typography/Label"; - -type OwnProps = Readonly<{ - text11: string; - text12: string; - text2: string; - text3: string; - isNew: boolean; - isPaid?: boolean; - onPressItem: () => void; - onLongPressItem?: () => void; - isSelectionModeEnabled?: boolean; - isItemSelected?: boolean; -}>; - -type Props = OwnProps & React.ComponentProps; - -const styles = StyleSheet.create({ - smallSpacer: { - width: "100%", - height: 4 - }, - verticalPad: { - paddingVertical: customVariables.spacerHeight - }, - headerMain: { - flexGrow: 1, - flexShrink: 1, - flexBasis: "100%" - }, - headerSub: { - flexGrow: 0, - flexShrink: 0, - flexBasis: "auto" - }, - badgeContainer: { - flex: 0, - paddingRight: 8, - alignSelf: "flex-start", - paddingTop: 6.5, - flexShrink: 0, - flexGrow: 0, - flexBasis: "auto" - }, - viewStyle: { - flexDirection: "row" - }, - icon: { - alignItems: "flex-start", - justifyContent: "flex-end", - flexDirection: "row", - flexGrow: 0, - flexShrink: 0, - flexBasis: "auto" - }, - text3Line: { - flex: 1, - flexDirection: "row" - }, - text3Container: { - flex: 1, - flexDirection: "row", - flexGrow: 1, - flexShrink: 1, - flexBasis: "100%", - minHeight: 24 - }, - text3SubContainer: { - flexGrow: 1, - flexShrink: 1, - flexBasis: "100%" - } -}); - -const ICON_WIDTH = 24; - -/** - * A component to display a touchable list item - */ -export default class DetailedlistItemComponent extends React.Component { - private getIconName = () => - this.props.isSelectionModeEnabled - ? this.props.isItemSelected - ? "legCheckOn" - : "legCheckOff" - : "chevronRightListItem"; - - shouldComponentUpdate(nextProps: Readonly): boolean { - // assuming that: - // - messages are immutable - // - if the component is somehow reused the text content changes (avoid stale callbacks) - return ( - this.props.isPaid !== nextProps.isPaid || - this.props.isNew !== nextProps.isNew || - this.props.isSelectionModeEnabled !== nextProps.isSelectionModeEnabled || - this.props.isItemSelected !== nextProps.isItemSelected || - this.props.text3 !== nextProps.text3 || - this.props.text2 !== nextProps.text2 || - this.props.text12 !== nextProps.text12 || - this.props.text11 !== nextProps.text11 - ); - } - - public render() { - return ( - - - -
{this.props.text11}
- - - - - - - - - {this.props.text2} - - - - - {this.props.isNew && ( - - - - )} - -

{this.props.text3}

- - - - - {this.props.isPaid && ( - - )} - - - - - {this.props.children} - - ); - } -} diff --git a/ts/features/design-system/core/DSLegacyListItems.tsx b/ts/features/design-system/core/DSLegacyListItems.tsx index 436bd0107b3..d63f559ec95 100644 --- a/ts/features/design-system/core/DSLegacyListItems.tsx +++ b/ts/features/design-system/core/DSLegacyListItems.tsx @@ -2,7 +2,6 @@ import { Divider, H4, VStack, useIOTheme } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Alert } from "react-native"; -import DetailedlistItemComponent from "../../../components/DetailedlistItemComponent"; import ListItemComponent from "../../../components/screens/ListItemComponent"; import OrderOption from "../../bonus/cgn/components/merchants/search/OrderOption"; import { DSComponentViewerBox } from "../components/DSComponentViewerBox"; @@ -127,23 +126,6 @@ export const DSLegacyListItems = () => { - - -

Misc

- - - - ); From 782ae31138b0794b3ee8b13b416b68f2c927576f Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 17 Oct 2024 16:56:37 +0200 Subject: [PATCH 04/22] Completely remove `Body` local typographic style --- .../InfoAltScreenComponent.tsx | 8 +- .../RemindUpdatePagoPaVersionOverlay.tsx | 3 +- ts/components/core/IORenderHtml.tsx | 93 ------------------- ts/components/core/typography/Body.tsx | 38 -------- .../typography/__test__/typography.test.tsx | 5 - .../infoScreen/InfoScreenComponent.tsx | 3 +- ts/components/screens/BaseHeader.tsx | 4 +- .../screens/GenericErrorComponent.tsx | 3 +- ts/components/screens/ListItemComponent.tsx | 4 +- ts/components/screens/ScreenContentHeader.tsx | 2 +- .../search/SearchNoResultMessage.tsx | 86 ----------------- ts/components/ui/AlertModal.tsx | 2 +- .../ui/__test__/Dismissable.test.tsx | 2 +- .../wallet/PaymentBannerComponent.tsx | 3 +- ts/components/wallet/PaymentHistoryItem.tsx | 3 +- .../wallet/PaymentSummaryComponent.tsx | 3 +- ts/components/wallet/PaymentsHistoryList.tsx | 3 +- ts/components/wallet/TransactionsList.tsx | 2 +- ts/components/wallet/card/CardComponent.tsx | 3 +- ts/components/wallet/payment/PspComponent.tsx | 3 +- .../screens/CdcBonusRequestInformationTos.tsx | 6 +- .../common/components/AvailableBonusItem.tsx | 3 +- .../design-system/core/DSAccordion.tsx | 4 +- .../design-system/core/DSBottomSheet.tsx | 2 +- .../design-system/core/DSEdgeToEdgeArea.tsx | 2 +- .../design-system/core/DSFullScreenModal.tsx | 4 +- .../design-system/core/DSHeaderFirstLevel.tsx | 2 +- .../DSHeaderSecondLevelWithSectionTitle.tsx | 2 +- ts/features/design-system/core/DSLayout.tsx | 2 +- .../design-system/core/DSLegacyAdvice.tsx | 3 +- .../design-system/core/DSLegacyTypography.tsx | 15 --- ts/features/design-system/core/DSSafeArea.tsx | 2 +- .../design-system/core/DSSafeAreaCentered.tsx | 4 +- .../screens/EuCovidCertLoadingScreen.tsx | 8 +- ts/features/idpay/common/components/Table.tsx | 3 +- .../IbanConfigurationLandingScreen.tsx | 2 +- .../screens/IbanEnrollmentScreen.tsx | 2 +- .../screens/IbanOnboardingScreen.tsx | 2 +- .../IdPayDiscountInstrumentsScreen.tsx | 3 +- .../screens/InstrumentsEnrollmentScreen.tsx | 2 +- .../components/InitiativeRulesInfoBox.tsx | 4 +- .../InitiativeTimelineComponent.tsx | 3 +- .../screens/IdPayInitiativeDetailsScreen.tsx | 2 +- .../screens/IdPayOperationsListScreen.tsx | 2 +- .../components/OnboardingPrivacyAdvice.tsx | 3 +- .../components/OnboardingServiceHeader.tsx | 3 +- .../screens/BoolValuePrerequisitesScreen.tsx | 3 +- .../onboarding/screens/CompletionScreen.tsx | 2 +- .../screens/PDNDPrerequisitesScreen.tsx | 2 +- .../screens/IDPayPaymentCodeInputScreen.tsx | 2 +- ...ineDiscountTransactionDetailsComponent.tsx | 3 +- .../TimelineRefundDetailsComponent.tsx | 3 +- .../TimelineTransactionDetailsComponent.tsx | 3 +- .../UnsubscriptionConfirmationScreen.tsx | 2 +- .../component/BancomatWalletPreview.tsx | 2 +- .../component/BPayWalletPreview.tsx | 2 +- .../component/CobadgeWalletPreview.tsx | 2 +- .../add-account/AddCobadgeComponent.tsx | 2 +- .../searchBank/SearchStartComponent.tsx | 3 +- .../paypal/components/PspInfoBottomSheet.tsx | 3 +- .../screen/PayPalPspSelectionScreen.tsx | 3 +- .../screen/PayPalStartOnboardingScreen.tsx | 3 +- .../wallet/paypal/PayPalWalletPreview.tsx | 2 +- .../paypal/screen/PayPalPspUpdateScreen.tsx | 2 +- .../TestAuthenticationScreen.tsx | 2 +- .../cie/CieCardReaderScreen.tsx | 2 +- ts/screens/modal/IdentificationLockModal.tsx | 6 +- .../FingerprintScreen.tsx | 3 +- ts/screens/profile/EmailInsertScreen.tsx | 2 +- .../profile/components/OptOutBottomSheet.tsx | 3 +- .../components/ShareDataComponent/index.tsx | 3 +- .../playgrounds/IdPayOnboardingPlayground.tsx | 16 ++-- .../wallet/PaymentHistoryDetailsScreen.tsx | 3 +- ts/screens/wallet/PaymentsHistoryScreen.tsx | 3 +- .../wallet/TransactionDetailsScreen.tsx | 8 +- ts/screens/wallet/WalletHomeScreen.tsx | 2 +- ...reditCardOnboardingAttemptDetailScreen.tsx | 3 +- .../CreditCardOnboardingAttemptsScreen.tsx | 3 +- .../payment/ManualDataInsertionScreen.tsx | 2 +- .../payment/PickPaymentMethodScreen.tsx | 3 + ts/screens/wallet/payment/PickPspScreen.tsx | 1 + .../wallet/payment/TransactionErrorScreen.tsx | 3 + .../components/TransactionSummaryStatus.tsx | 3 + .../hooks/usePaymentAmountInfoBottomSheet.tsx | 6 +- 84 files changed, 120 insertions(+), 364 deletions(-) delete mode 100644 ts/components/core/IORenderHtml.tsx delete mode 100644 ts/components/core/typography/Body.tsx delete mode 100644 ts/components/search/SearchNoResultMessage.tsx diff --git a/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx b/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx index 379148a3fba..7cc42479eab 100644 --- a/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx +++ b/ts/components/InfoAltScreenComponent/InfoAltScreenComponent.tsx @@ -1,10 +1,14 @@ import * as React from "react"; import { StyleSheet, Text, View } from "react-native"; -import { VSpacer, IOPictograms, Pictogram } from "@pagopa/io-app-design-system"; +import { + VSpacer, + IOPictograms, + Pictogram, + Body +} from "@pagopa/io-app-design-system"; import { useFocusEffect } from "@react-navigation/native"; import themeVariables from "../../theme/variables"; import { setAccessibilityFocus } from "../../utils/accessibility"; -import { Body } from "../core/typography/Body"; import { H2 } from "../core/typography/H2"; type Props = { diff --git a/ts/components/RemindUpdatePagoPaVersionOverlay.tsx b/ts/components/RemindUpdatePagoPaVersionOverlay.tsx index e8c1c12985a..5f6dd7330e4 100644 --- a/ts/components/RemindUpdatePagoPaVersionOverlay.tsx +++ b/ts/components/RemindUpdatePagoPaVersionOverlay.tsx @@ -1,11 +1,10 @@ import { Millisecond } from "@pagopa/ts-commons/lib/units"; import * as React from "react"; import { Image, Linking, StyleSheet, View } from "react-native"; -import { ButtonSolid, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, ButtonSolid, VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../i18n"; import customVariables from "../theme/variables"; import { storeUrl } from "../utils/appVersion"; -import { Body } from "./core/typography/Body"; import { H1 } from "./core/typography/H1"; import { H3 } from "./core/typography/H3"; import { IOStyles } from "./core/variables/IOStyles"; diff --git a/ts/components/core/IORenderHtml.tsx b/ts/components/core/IORenderHtml.tsx deleted file mode 100644 index ee67ac362b3..00000000000 --- a/ts/components/core/IORenderHtml.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { MixedStyleRecord } from "@native-html/transient-render-engine"; -import * as React from "react"; -import { useWindowDimensions } from "react-native"; -import RenderHtml from "react-native-render-html"; -import { IOColors } from "@pagopa/io-app-design-system"; -import { allUsedFonts, makeFontStyleObject } from "./fonts"; -import { - bodyDefaultColor, - bodyDefaultWeight, - bodyFontSize -} from "./typography/Body"; -import { - h1DefaultColor, - h1DefaultWeight, - h1FontSize, - h1LineHeight -} from "./typography/H1"; -import { h2DefaultColor, h2DefaultWeight, h2FontSize } from "./typography/H2"; -import { calculateH3WeightColor, h3FontSize } from "./typography/H3"; -import { calculateH4WeightColor, h4FontSize } from "./typography/H4"; -import { h5DefaultColor, h5DefaultWeight, h5FontSize } from "./typography/H5"; -import { linkDefaultColor, linkDefaultWeight } from "./typography/Link"; - -type Props = React.ComponentProps; - -const h3WeightColor = calculateH3WeightColor(); -const h4WeightColor = calculateH4WeightColor(); - -const tagsStyles: MixedStyleRecord = { - body: { - whiteSpace: "normal", - color: IOColors[bodyDefaultColor], - fontSize: bodyFontSize, - ...makeFontStyleObject(bodyDefaultWeight) - }, - a: { - color: IOColors[linkDefaultColor], - ...makeFontStyleObject(linkDefaultWeight) - }, - h1: { - fontSize: h1FontSize, - lineHeight: h1LineHeight, - color: IOColors[h1DefaultColor], - ...makeFontStyleObject(h1DefaultWeight) - }, - h2: { - fontSize: h2FontSize, - color: IOColors[h2DefaultColor], - ...makeFontStyleObject(h2DefaultWeight) - }, - h3: { - fontSize: h3FontSize, - color: IOColors[h3WeightColor.color], - ...makeFontStyleObject(h3WeightColor.weight) - }, - h4: { - fontSize: h4FontSize, - color: IOColors[h4WeightColor.color], - ...makeFontStyleObject(h4WeightColor.weight) - }, - h5: { - fontSize: h5FontSize, - color: IOColors[h5DefaultColor], - ...makeFontStyleObject(h5DefaultWeight) - } -}; - -const renderersProps = { - img: { - enableExperimentalPercentWidth: true - } -}; - -/** - * Wraps the {@link RenderHtml} component with the custom IO Styles & logic - * This is an experimental component - * @param props - * @constructor - * @experimental - */ -export const IORenderHtml = (props: Props): React.ReactElement => { - const { width } = useWindowDimensions(); - - return ( - - ); -}; diff --git a/ts/components/core/typography/Body.tsx b/ts/components/core/typography/Body.tsx deleted file mode 100644 index cc0021cba99..00000000000 --- a/ts/components/core/typography/Body.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from "react"; -import { IOColors, IOTheme } from "@pagopa/io-app-design-system"; -import { IOFontFamily, IOFontWeight } from "../fonts"; -import { ExternalTypographyProps, TypographyProps } from "./common"; -import { useTypographyFactory } from "./Factory"; - -type PartialAllowedColors = Extract< - IOColors, - "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight" ->; -type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"]; -type AllowedWeight = Extract; - -type OwnProps = ExternalTypographyProps< - TypographyProps ->; - -const fontName: IOFontFamily = "TitilliumSansPro"; -export const bodyFontSize = 16; -export const bodyLineHeight = 24; -export const bodyDefaultColor: AllowedColors = "bluegrey"; -export const bodyDefaultWeight: AllowedWeight = "Regular"; - -/** - * Typography component to render `Body` text with font size {@link fontSize} and fontFamily {@link fontName}. - * default values(if not defined) are weight: `Regular`, color: `bluegrey` - * @param props` - * @constructor - * @deprecated Don't use local `Body`. Import it from `io-app-design-system` instead. - */ -export const Body: React.FunctionComponent = props => - useTypographyFactory({ - ...props, - defaultWeight: bodyDefaultWeight, - defaultColor: bodyDefaultColor, - font: fontName, - fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight } - }); diff --git a/ts/components/core/typography/__test__/typography.test.tsx b/ts/components/core/typography/__test__/typography.test.tsx index cad4ebe6041..621dc27b168 100644 --- a/ts/components/core/typography/__test__/typography.test.tsx +++ b/ts/components/core/typography/__test__/typography.test.tsx @@ -2,7 +2,6 @@ import React from "react"; import TestRenderer from "react-test-renderer"; import type { IOColors } from "@pagopa/io-app-design-system"; import { IOFontWeight } from "../../fonts"; -import { Body } from "../Body"; import { calculateWeightColor } from "../common"; import { H1 } from "../H1"; import { H2 } from "../H2"; @@ -134,10 +133,6 @@ describe("Test Typography Components", () => { ).toJSON(); expect(h5Regularblue).toMatchSnapshot(); }); - it("Body Snapshot", () => { - const bodyDefault = TestRenderer.create(Text).toJSON(); - expect(bodyDefault).toMatchSnapshot(); - }); it("LabelSmall Snapshot", () => { const labelSmallDefault = TestRenderer.create( Text diff --git a/ts/components/infoScreen/InfoScreenComponent.tsx b/ts/components/infoScreen/InfoScreenComponent.tsx index 6507a80aad9..9ce4273ccbf 100644 --- a/ts/components/infoScreen/InfoScreenComponent.tsx +++ b/ts/components/infoScreen/InfoScreenComponent.tsx @@ -1,10 +1,9 @@ -import { VSpacer } from "@pagopa/io-app-design-system"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import { useFocusEffect } from "@react-navigation/native"; import * as React from "react"; import { StyleSheet, Text, View } from "react-native"; import themeVariables from "../../theme/variables"; import { setAccessibilityFocus } from "../../utils/accessibility"; -import { Body } from "../core/typography/Body"; import { H2 } from "../core/typography/H2"; type Props = { diff --git a/ts/components/screens/BaseHeader.tsx b/ts/components/screens/BaseHeader.tsx index 5f85472eac5..d0332bf8876 100644 --- a/ts/components/screens/BaseHeader.tsx +++ b/ts/components/screens/BaseHeader.tsx @@ -18,7 +18,8 @@ import { IconButton, HSpacer, IOSpacer, - IOStyles + IOStyles, + Body } from "@pagopa/io-app-design-system"; import { useFocusEffect } from "@react-navigation/native"; import I18n from "../../i18n"; @@ -30,7 +31,6 @@ import { GlobalState } from "../../store/reducers/types"; import variables from "../../theme/variables"; import { setAccessibilityFocus } from "../../utils/accessibility"; import { maybeNotNullyString } from "../../utils/strings"; -import { Body } from "../core/typography/Body"; import GoBackButton from "../GoBackButton"; import SearchButton, { SearchType } from "../search/SearchButton"; import AppHeader from "../ui/AppHeader"; diff --git a/ts/components/screens/GenericErrorComponent.tsx b/ts/components/screens/GenericErrorComponent.tsx index 7ce997401fa..fc795da6879 100644 --- a/ts/components/screens/GenericErrorComponent.tsx +++ b/ts/components/screens/GenericErrorComponent.tsx @@ -1,4 +1,4 @@ -import { FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; import { useFocusEffect } from "@react-navigation/native"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; @@ -14,7 +14,6 @@ import { import I18n from "../../i18n"; import { WithTestID } from "../../types/WithTestID"; import { setAccessibilityFocus } from "../../utils/accessibility"; -import { Body } from "../core/typography/Body"; import { H2 } from "../core/typography/H2"; import { IOStyles } from "../core/variables/IOStyles"; diff --git a/ts/components/screens/ListItemComponent.tsx b/ts/components/screens/ListItemComponent.tsx index a4ea324fcd3..4ee4e7da7a5 100644 --- a/ts/components/screens/ListItemComponent.tsx +++ b/ts/components/screens/ListItemComponent.tsx @@ -17,12 +17,12 @@ import { HSpacer, Divider, VSpacer, - NativeSwitch + NativeSwitch, + Body } from "@pagopa/io-app-design-system"; import customVariables from "../../theme/variables"; import { makeFontStyleObject } from "../core/fonts"; import { IOBadge } from "../core/IOBadge"; -import { Body } from "../core/typography/Body"; import { IOStyles } from "../core/variables/IOStyles"; import { BadgeComponent } from "./BadgeComponent"; diff --git a/ts/components/screens/ScreenContentHeader.tsx b/ts/components/screens/ScreenContentHeader.tsx index 6115f42d2bb..67089ed81dd 100644 --- a/ts/components/screens/ScreenContentHeader.tsx +++ b/ts/components/screens/ScreenContentHeader.tsx @@ -12,6 +12,7 @@ import { Platform } from "react-native"; import { + Body, IOColors, IOIcons, IOPictograms, @@ -23,7 +24,6 @@ import ScreenHeader from "../ScreenHeader"; import { H1 } from "../../components/core/typography/H1"; import variables from "../../theme/variables"; -import { Body } from "../core/typography/Body"; type Props = Readonly<{ title?: string; diff --git a/ts/components/search/SearchNoResultMessage.tsx b/ts/components/search/SearchNoResultMessage.tsx deleted file mode 100644 index 10985a35f19..00000000000 --- a/ts/components/search/SearchNoResultMessage.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { VSpacer } from "@pagopa/io-app-design-system"; -import * as React from "react"; -import { Image, StyleSheet, View } from "react-native"; -import { heightPercentageToDP as hp } from "react-native-responsive-screen"; -import I18n from "../../i18n"; -import { Body } from "../core/typography/Body"; -import { IOStyles } from "../core/variables/IOStyles"; -import { MIN_CHARACTER_SEARCH_TEXT } from "./SearchButton"; - -const styles = StyleSheet.create({ - invalidSearchBarText: { - height: hp("15%") - }, - noResultsFound: { - height: hp("15%") - } -}); - -type ErrorSearchType = "InvalidSearchBarText" | "NoResultsFound"; - -/** - * Print the icon according to current error type - * @param errorType - */ -export const renderIconErrorSearch = (errorType: ErrorSearchType) => { - switch (errorType) { - case "InvalidSearchBarText": - return ( - - ); - case "NoResultsFound": - return ( - - ); - } -}; - -/** - * Convert the error type into a user-readable string - * @param errorType - */ -export const renderMessageErrorSearch = ( - errorType: ErrorSearchType -): string => { - switch (errorType) { - case "InvalidSearchBarText": - return I18n.t("global.search.invalidSearchBarText", { - minCharacter: MIN_CHARACTER_SEARCH_TEXT - }); - case "NoResultsFound": - return I18n.t("global.search.noResultsFound"); - } -}; - -type Props = { - errorType: ErrorSearchType; -}; - -export class SearchNoResultMessage extends React.PureComponent { - public render() { - const { errorType } = this.props; - return ( - - - - {renderIconErrorSearch(errorType)} - - - - {renderMessageErrorSearch(errorType)} - - - - ); - } -} diff --git a/ts/components/ui/AlertModal.tsx b/ts/components/ui/AlertModal.tsx index f9f9edb33f8..0cf5dd53906 100644 --- a/ts/components/ui/AlertModal.tsx +++ b/ts/components/ui/AlertModal.tsx @@ -1,4 +1,5 @@ import { + Body, IOColors, IOVisualCostants, hexToRgba @@ -7,7 +8,6 @@ import React from "react"; import { StyleSheet, View } from "react-native"; import { useHardwareBackButton } from "../../hooks/useHardwareBackButton"; import themeVariables from "../../theme/variables"; -import { Body } from "../core/typography/Body"; import { Overlay } from "./Overlay"; const opaqueBgColor = hexToRgba(IOColors.black, 0.6); diff --git a/ts/components/ui/__test__/Dismissable.test.tsx b/ts/components/ui/__test__/Dismissable.test.tsx index 6f18b7b8eb2..bc7d8b01e81 100644 --- a/ts/components/ui/__test__/Dismissable.test.tsx +++ b/ts/components/ui/__test__/Dismissable.test.tsx @@ -5,7 +5,7 @@ import { fireGestureHandler, getByGestureTestId } from "react-native-gesture-handler/jest-utils"; -import { Body } from "../../core/typography/Body"; +import { Body } from "@pagopa/io-app-design-system"; import { Dismissable } from "../Dismissable"; const tContent = "Dismissable content"; diff --git a/ts/components/wallet/PaymentBannerComponent.tsx b/ts/components/wallet/PaymentBannerComponent.tsx index 2d28a92e942..516ec7f9c65 100644 --- a/ts/components/wallet/PaymentBannerComponent.tsx +++ b/ts/components/wallet/PaymentBannerComponent.tsx @@ -2,11 +2,10 @@ import { pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import * as React from "react"; import { View, StyleSheet } from "react-native"; -import { IOColors } from "@pagopa/io-app-design-system"; +import { Body, IOColors } from "@pagopa/io-app-design-system"; import { ImportoEuroCents } from "../../../definitions/backend/ImportoEuroCents"; import I18n from "../../i18n"; import { formatNumberCentsToAmount } from "../../utils/stringBuilder"; -import { Body } from "../core/typography/Body"; import { Label } from "../core/typography/Label"; import { IOStyles } from "../core/variables/IOStyles"; diff --git a/ts/components/wallet/PaymentHistoryItem.tsx b/ts/components/wallet/PaymentHistoryItem.tsx index 698a1715430..988f6cfe764 100644 --- a/ts/components/wallet/PaymentHistoryItem.tsx +++ b/ts/components/wallet/PaymentHistoryItem.tsx @@ -1,9 +1,8 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import { Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Icon, HSpacer, VSpacer, Body } from "@pagopa/io-app-design-system"; import I18n from "../../i18n"; import customVariables from "../../theme/variables"; -import { Body } from "../core/typography/Body"; import { IOStyles } from "../core/variables/IOStyles"; import { BadgeComponent } from "../screens/BadgeComponent"; import TouchableDefaultOpacity from "../TouchableDefaultOpacity"; diff --git a/ts/components/wallet/PaymentSummaryComponent.tsx b/ts/components/wallet/PaymentSummaryComponent.tsx index 9062b327a33..b853ad2dad8 100644 --- a/ts/components/wallet/PaymentSummaryComponent.tsx +++ b/ts/components/wallet/PaymentSummaryComponent.tsx @@ -1,10 +1,9 @@ -import { HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Image, ImageSourcePropType, StyleSheet, View } from "react-native"; import I18n from "../../i18n"; import { isStringNullyOrEmpty } from "../../utils/strings"; import ItemSeparatorComponent from "../ItemSeparatorComponent"; -import { Body } from "../core/typography/Body"; import { H3 } from "../core/typography/H3"; import { IOStyles } from "../core/variables/IOStyles"; import { BadgeComponent } from "../screens/BadgeComponent"; diff --git a/ts/components/wallet/PaymentsHistoryList.tsx b/ts/components/wallet/PaymentsHistoryList.tsx index 0a078548324..259ad746b20 100644 --- a/ts/components/wallet/PaymentsHistoryList.tsx +++ b/ts/components/wallet/PaymentsHistoryList.tsx @@ -12,7 +12,7 @@ import { } from "react-native"; import { pipe } from "fp-ts/lib/function"; -import { ContentWrapper, IOColors } from "@pagopa/io-app-design-system"; +import { Body, ContentWrapper, IOColors } from "@pagopa/io-app-design-system"; import I18n from "../../i18n"; import { PaymentHistory, @@ -25,7 +25,6 @@ import { getIuv } from "../../utils/payment"; import ItemSeparatorComponent from "../ItemSeparatorComponent"; import { EdgeBorderComponent } from "../screens/EdgeBorderComponent"; -import { Body } from "../core/typography/Body"; import PaymentHistoryItem from "./PaymentHistoryItem"; type Props = Readonly<{ diff --git a/ts/components/wallet/TransactionsList.tsx b/ts/components/wallet/TransactionsList.tsx index 94ee4dec836..6477d95260a 100644 --- a/ts/components/wallet/TransactionsList.tsx +++ b/ts/components/wallet/TransactionsList.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { FlatList, ListRenderItemInfo, StyleSheet, View } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import { + Body, ButtonOutline, IOColors, IOVisualCostants, @@ -15,7 +16,6 @@ import variables from "../../theme/variables"; import { Transaction } from "../../types/pagopa"; import { format } from "../../utils/dates"; import ItemSeparatorComponent from "../ItemSeparatorComponent"; -import { Body } from "../core/typography/Body"; import { H3 } from "../core/typography/H3"; import { EdgeBorderComponent } from "../screens/EdgeBorderComponent"; import BoxedRefreshIndicator from "../ui/BoxedRefreshIndicator"; diff --git a/ts/components/wallet/card/CardComponent.tsx b/ts/components/wallet/card/CardComponent.tsx index a8383c68db5..f0e82130952 100644 --- a/ts/components/wallet/card/CardComponent.tsx +++ b/ts/components/wallet/card/CardComponent.tsx @@ -3,7 +3,7 @@ * with different appearences based on * the props passed */ -import { IOColors, Icon, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, IOColors, Icon, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import * as E from "fp-ts/lib/Either"; import * as O from "fp-ts/lib/Option"; @@ -18,7 +18,6 @@ import { isPaymentMethodExpired } from "../../../utils/paymentMethod"; import { buildExpirationDate } from "../../../utils/stringBuilder"; import { FOUR_UNICODE_CIRCLES } from "../../../utils/wallet"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; -import { Body } from "../../core/typography/Body"; import { H5 } from "../../core/typography/H5"; import Logo, { cardIcons } from "./Logo"; diff --git a/ts/components/wallet/payment/PspComponent.tsx b/ts/components/wallet/payment/PspComponent.tsx index 55396a17c80..3978e272f23 100644 --- a/ts/components/wallet/payment/PspComponent.tsx +++ b/ts/components/wallet/payment/PspComponent.tsx @@ -1,4 +1,4 @@ -import { Icon } from "@pagopa/io-app-design-system"; +import { Body, Icon } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React, { FC } from "react"; @@ -9,7 +9,6 @@ import customVariables from "../../../theme/variables"; import { getPspIconUrlFromAbi } from "../../../utils/paymentMethod"; import { formatNumberCentsToAmount } from "../../../utils/stringBuilder"; import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; -import { Body } from "../../core/typography/Body"; import { H4 } from "../../core/typography/H4"; const ICON_SIZE = 24; diff --git a/ts/features/bonus/cdc/screens/CdcBonusRequestInformationTos.tsx b/ts/features/bonus/cdc/screens/CdcBonusRequestInformationTos.tsx index 54fa66be09e..eb0d352fe59 100644 --- a/ts/features/bonus/cdc/screens/CdcBonusRequestInformationTos.tsx +++ b/ts/features/bonus/cdc/screens/CdcBonusRequestInformationTos.tsx @@ -10,7 +10,6 @@ import { View } from "react-native"; import { BonusAvailableContent } from "../../../../../definitions/content/BonusAvailableContent"; -import { IORenderHtml } from "../../../../components/core/IORenderHtml"; import { H2 } from "../../../../components/core/typography/H2"; import { H4 } from "../../../../components/core/typography/H4"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; @@ -77,7 +76,8 @@ const CdcBonusRequestInformationTos = () => { )} - { marginBottom: 0 } }} - /> + /> */} diff --git a/ts/features/bonus/common/components/AvailableBonusItem.tsx b/ts/features/bonus/common/components/AvailableBonusItem.tsx index 2fa3b87e40f..9543bbeb712 100644 --- a/ts/features/bonus/common/components/AvailableBonusItem.tsx +++ b/ts/features/bonus/common/components/AvailableBonusItem.tsx @@ -1,4 +1,4 @@ -import { HSpacer } from "@pagopa/io-app-design-system"; +import { Body, HSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Image, Pressable, StyleSheet, View } from "react-native"; import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable"; @@ -7,7 +7,6 @@ import I18n from "../../../../i18n"; import { getRemoteLocale } from "../../../messages/utils/messages"; import { IOBadge } from "../../../../components/core/IOBadge"; -import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; diff --git a/ts/features/design-system/core/DSAccordion.tsx b/ts/features/design-system/core/DSAccordion.tsx index b1ee7705acd..92789b063a9 100644 --- a/ts/features/design-system/core/DSAccordion.tsx +++ b/ts/features/design-system/core/DSAccordion.tsx @@ -2,11 +2,11 @@ import { AccordionItem, VSpacer, H4, - useIOTheme + useIOTheme, + Body } from "@pagopa/io-app-design-system"; import * as React from "react"; import { FlatList, ListRenderItemInfo, View } from "react-native"; -import { Body } from "../../../components/core/typography/Body"; import { DesignSystemScreen } from "../components/DesignSystemScreen"; const assistanceData: Array = [ diff --git a/ts/features/design-system/core/DSBottomSheet.tsx b/ts/features/design-system/core/DSBottomSheet.tsx index e3174963be2..78b0df4728e 100644 --- a/ts/features/design-system/core/DSBottomSheet.tsx +++ b/ts/features/design-system/core/DSBottomSheet.tsx @@ -1,4 +1,5 @@ import { + Body, ButtonSolid, ContentWrapper, Divider, @@ -10,7 +11,6 @@ import { } from "@pagopa/io-app-design-system"; import * as React from "react"; import { SafeAreaView, View } from "react-native"; -import { Body } from "../../../components/core/typography/Body"; import { useIOBottomSheetAutoresizableModal, useIOBottomSheetModal, diff --git a/ts/features/design-system/core/DSEdgeToEdgeArea.tsx b/ts/features/design-system/core/DSEdgeToEdgeArea.tsx index 3e8bc55fa35..7a8b9af5fcb 100644 --- a/ts/features/design-system/core/DSEdgeToEdgeArea.tsx +++ b/ts/features/design-system/core/DSEdgeToEdgeArea.tsx @@ -5,12 +5,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; import { + Body, IOColors, IOVisualCostants, hexToRgba } from "@pagopa/io-app-design-system"; import { H2 } from "../../../components/core/typography/H2"; -import { Body } from "../../../components/core/typography/Body"; const bottomBarHeight: number = 70; const topBarHeight: number = 55; diff --git a/ts/features/design-system/core/DSFullScreenModal.tsx b/ts/features/design-system/core/DSFullScreenModal.tsx index d0d3d2e52d0..73d697e882e 100644 --- a/ts/features/design-system/core/DSFullScreenModal.tsx +++ b/ts/features/design-system/core/DSFullScreenModal.tsx @@ -5,10 +5,10 @@ import { IOColors, hexToRgba, ContentWrapper, - IOVisualCostants + IOVisualCostants, + Body } from "@pagopa/io-app-design-system"; import { H2 } from "../../../components/core/typography/H2"; -import { Body } from "../../../components/core/typography/Body"; const bottomBarHeight: number = 70; diff --git a/ts/features/design-system/core/DSHeaderFirstLevel.tsx b/ts/features/design-system/core/DSHeaderFirstLevel.tsx index 4faa0c7c6d3..4ce4b9d58cd 100644 --- a/ts/features/design-system/core/DSHeaderFirstLevel.tsx +++ b/ts/features/design-system/core/DSHeaderFirstLevel.tsx @@ -5,12 +5,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; import { + Body, IOColors, IOVisualCostants, hexToRgba } from "@pagopa/io-app-design-system"; import { H2 } from "../../../components/core/typography/H2"; -import { Body } from "../../../components/core/typography/Body"; const bottomBarHeight: number = 70; diff --git a/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx b/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx index ce103219667..bc6ae69f1fc 100644 --- a/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx +++ b/ts/features/design-system/core/DSHeaderSecondLevelWithSectionTitle.tsx @@ -8,13 +8,13 @@ import Animated, { } from "react-native-reanimated"; import { useNavigation } from "@react-navigation/native"; import { + Body, H3, HeaderSecondLevel, IOColors, IOVisualCostants, VSpacer } from "@pagopa/io-app-design-system"; -import { Body } from "../../../components/core/typography/Body"; import { makeFontStyleObject } from "../../../components/core/fonts"; const styles = StyleSheet.create({ diff --git a/ts/features/design-system/core/DSLayout.tsx b/ts/features/design-system/core/DSLayout.tsx index 9c5d9896d05..029307af504 100644 --- a/ts/features/design-system/core/DSLayout.tsx +++ b/ts/features/design-system/core/DSLayout.tsx @@ -1,4 +1,5 @@ import { + Body, ContentWrapper, Divider, HStack, @@ -10,7 +11,6 @@ import { } from "@pagopa/io-app-design-system"; import * as React from "react"; import { View } from "react-native"; -import { Body } from "../../../components/core/typography/Body"; import { H1 } from "../../../components/core/typography/H1"; import { H3 } from "../../../components/core/typography/H3"; import { LabelSmall } from "../../../components/core/typography/LabelSmall"; diff --git a/ts/features/design-system/core/DSLegacyAdvice.tsx b/ts/features/design-system/core/DSLegacyAdvice.tsx index b77ab59bf35..7b872d00f22 100644 --- a/ts/features/design-system/core/DSLegacyAdvice.tsx +++ b/ts/features/design-system/core/DSLegacyAdvice.tsx @@ -1,4 +1,4 @@ -import { Icon, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, Icon, VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; import { StyleSheet, View } from "react-native"; import { InfoBox } from "../../../components/box/InfoBox"; @@ -7,7 +7,6 @@ import { DSFullWidthComponent } from "../components/DSFullWidthComponent"; /* Types */ import { ImportoEuroCents } from "../../../../definitions/backend/ImportoEuroCents"; -import { Body } from "../../../components/core/typography/Body"; import { H5 } from "../../../components/core/typography/H5"; import { Label } from "../../../components/core/typography/Label"; import { IOStyles } from "../../../components/core/variables/IOStyles"; diff --git a/ts/features/design-system/core/DSLegacyTypography.tsx b/ts/features/design-system/core/DSLegacyTypography.tsx index cf7fa49b656..c19794bdb30 100644 --- a/ts/features/design-system/core/DSLegacyTypography.tsx +++ b/ts/features/design-system/core/DSLegacyTypography.tsx @@ -1,7 +1,6 @@ import { HStack, IOColors, VStack } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Alert, View } from "react-native"; -import { Body as LegacyBody } from "../../../components/core/typography/Body"; import { H1 as LegacyH1 } from "../../../components/core/typography/H1"; import { H2 as LegacyH2 } from "../../../components/core/typography/H2"; import { H3 as LegacyH3 } from "../../../components/core/typography/H3"; @@ -21,7 +20,6 @@ export const DSLegacyTypography = () => ( - Alert.alert("onPress link!")}>Link @@ -130,19 +128,6 @@ const LegacyH5Row = () => ( ); -const LegacyBodyRow = () => ( - - Body - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis - congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel - porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id lorem - aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui massa, - eget pharetra mauris posuere semper. - - -); - const LegacyLabelSmallRow = () => ( Label small diff --git a/ts/features/design-system/core/DSSafeArea.tsx b/ts/features/design-system/core/DSSafeArea.tsx index 351139e6695..b3fb41d12ff 100644 --- a/ts/features/design-system/core/DSSafeArea.tsx +++ b/ts/features/design-system/core/DSSafeArea.tsx @@ -1,11 +1,11 @@ import * as React from "react"; import { Text, View, SafeAreaView, ScrollView } from "react-native"; import { + Body, IOColors, IOVisualCostants, hexToRgba } from "@pagopa/io-app-design-system"; -import { Body } from "../../../components/core/typography/Body"; import { H2 } from "../../../components/core/typography/H2"; import { IOStyles } from "../../../components/core/variables/IOStyles"; diff --git a/ts/features/design-system/core/DSSafeAreaCentered.tsx b/ts/features/design-system/core/DSSafeAreaCentered.tsx index 5d30a5096cb..a1696731e1e 100644 --- a/ts/features/design-system/core/DSSafeAreaCentered.tsx +++ b/ts/features/design-system/core/DSSafeAreaCentered.tsx @@ -6,9 +6,9 @@ import { IOColors, hexToRgba, VSpacer, - IOVisualCostants + IOVisualCostants, + Body } from "@pagopa/io-app-design-system"; -import { Body } from "../../../components/core/typography/Body"; import { H2 } from "../../../components/core/typography/H2"; import { IOStyles } from "../../../components/core/variables/IOStyles"; diff --git a/ts/features/euCovidCert/screens/EuCovidCertLoadingScreen.tsx b/ts/features/euCovidCert/screens/EuCovidCertLoadingScreen.tsx index be2ff2dcd9b..af6df84ca27 100644 --- a/ts/features/euCovidCert/screens/EuCovidCertLoadingScreen.tsx +++ b/ts/features/euCovidCert/screens/EuCovidCertLoadingScreen.tsx @@ -1,7 +1,11 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; -import { H4, LoadingSpinner, VSpacer } from "@pagopa/io-app-design-system"; -import { Body } from "../../../components/core/typography/Body"; +import { + Body, + H4, + LoadingSpinner, + VSpacer +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { BaseEuCovidCertificateLayout } from "./BaseEuCovidCertificateLayout"; diff --git a/ts/features/idpay/common/components/Table.tsx b/ts/features/idpay/common/components/Table.tsx index 69de829bc2f..25b48e6abc4 100644 --- a/ts/features/idpay/common/components/Table.tsx +++ b/ts/features/idpay/common/components/Table.tsx @@ -1,7 +1,6 @@ import React, { Fragment } from "react"; import { StyleSheet, View } from "react-native"; -import { Divider, WithTestID } from "@pagopa/io-app-design-system"; -import { Body } from "../../../../components/core/typography/Body"; +import { Body, Divider, WithTestID } from "@pagopa/io-app-design-system"; import { H3 } from "../../../../components/core/typography/H3"; export type TableRow = WithTestID<{ diff --git a/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx b/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx index 3507eb1338a..8201ce03770 100644 --- a/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx @@ -1,4 +1,5 @@ import { + Body, ButtonSolid, ContentWrapper, FooterWithButtons, @@ -7,7 +8,6 @@ import { } from "@pagopa/io-app-design-system"; import React from "react"; import { SafeAreaView, StyleSheet, View } from "react-native"; -import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; diff --git a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx index 4ce44e3101a..bb5c06ccb11 100644 --- a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FeatureInfo, FooterWithButtons, VSpacer @@ -8,7 +9,6 @@ import React from "react"; import { SafeAreaView, ScrollView, StyleSheet } from "react-native"; import { IbanDTO } from "../../../../../definitions/idpay/IbanDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import ListItemComponent from "../../../../components/screens/ListItemComponent"; diff --git a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx index ce5c513e90d..d9417607cb5 100644 --- a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx +++ b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FooterWithButtons, HSpacer, Icon, @@ -10,7 +11,6 @@ import React from "react"; import { ScrollView, View } from "react-native"; import { Iban } from "../../../../../definitions/backend/Iban"; import { LabelledItem } from "../../../../components/LabelledItem"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { LabelSmall } from "../../../../components/core/typography/LabelSmall"; import { Link } from "../../../../components/core/typography/Link"; diff --git a/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx b/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx index 74b007dd446..c42b7e749fd 100644 --- a/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx +++ b/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx @@ -1,4 +1,4 @@ -import { Divider, H1, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, Divider, H1, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { RouteProp, @@ -10,7 +10,6 @@ import React from "react"; import { ScrollView, StyleSheet } from "react-native"; import { InstrumentTypeEnum } from "../../../../../definitions/idpay/InstrumentDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import TopScreenComponent from "../../../../components/screens/TopScreenComponent"; import I18n from "../../../../i18n"; import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsList"; diff --git a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx index f1f5d1d92ad..f0f87f0716f 100644 --- a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FeatureInfo, FooterWithButtons, IOStyles, @@ -10,7 +11,6 @@ import { pipe } from "fp-ts/lib/function"; import React from "react"; import { ScrollView } from "react-native"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; diff --git a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx index fb4c2142526..1ea72f1c78b 100644 --- a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx +++ b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx @@ -7,9 +7,9 @@ import { Icon, HSpacer, VSpacer, - ContentWrapper + ContentWrapper, + Body } from "@pagopa/io-app-design-system"; -import { Body } from "../../../../components/core/typography/Body"; import { H4 } from "../../../../components/core/typography/H4"; import { Link } from "../../../../components/core/typography/Link"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; diff --git a/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx b/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx index b6731e99fb1..495eca08db2 100644 --- a/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx +++ b/ts/features/idpay/details/components/InitiativeTimelineComponent.tsx @@ -1,9 +1,8 @@ -import { Divider, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, Divider, VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { useNavigation } from "@react-navigation/native"; import React from "react"; import { View } from "react-native"; -import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; import { LabelSmall } from "../../../../components/core/typography/LabelSmall"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; diff --git a/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx b/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx index 5f31c3c5d2b..57a40885e64 100644 --- a/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx +++ b/ts/features/idpay/details/screens/IdPayInitiativeDetailsScreen.tsx @@ -1,4 +1,5 @@ import { + Body, ButtonSolid, Chip, ContentWrapper, @@ -23,7 +24,6 @@ import { import { BonusCardScreenComponent } from "../../../../components/BonusCard"; import { BonusCardCounter } from "../../../../components/BonusCard/BonusCardCounter"; import { BonusStatus } from "../../../../components/BonusCard/type"; -import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; import { IOScrollViewActions } from "../../../../components/ui/IOScrollView"; import I18n from "../../../../i18n"; diff --git a/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx b/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx index 14446cc8eba..f145bd2ff06 100644 --- a/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx +++ b/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx @@ -1,4 +1,5 @@ import { + Body, ContentWrapper, Divider, HSpacer, @@ -13,7 +14,6 @@ import React from "react"; import { ActivityIndicator, FlatList, StyleSheet } from "react-native"; import Placeholder from "rn-placeholder"; import { OperationListDTO } from "../../../../../definitions/idpay/OperationListDTO"; -import { Body } from "../../../../components/core/typography/Body"; import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader"; import I18n from "../../../../i18n"; import customVariables from "../../../../theme/variables"; diff --git a/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx b/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx index 09c9bf2b815..7587a1810e4 100644 --- a/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx +++ b/ts/features/idpay/onboarding/components/OnboardingPrivacyAdvice.tsx @@ -1,6 +1,5 @@ -import { IOToast } from "@pagopa/io-app-design-system"; +import { Body, IOToast } from "@pagopa/io-app-design-system"; import * as React from "react"; -import { Body } from "../../../../components/core/typography/Body"; import { LabelSmall } from "../../../../components/core/typography/LabelSmall"; import I18n from "../../../../i18n"; import { openWebUrl } from "../../../../utils/url"; diff --git a/ts/features/idpay/onboarding/components/OnboardingServiceHeader.tsx b/ts/features/idpay/onboarding/components/OnboardingServiceHeader.tsx index 71510f0bc7e..9964d393143 100644 --- a/ts/features/idpay/onboarding/components/OnboardingServiceHeader.tsx +++ b/ts/features/idpay/onboarding/components/OnboardingServiceHeader.tsx @@ -1,11 +1,10 @@ -import { VSpacer } from "@pagopa/io-app-design-system"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import * as React from "react"; import { Image, StyleSheet, View } from "react-native"; import Placeholder from "rn-placeholder"; import { InitiativeDataDTO } from "../../../../../definitions/idpay/InitiativeDataDTO"; -import { Body } from "../../../../components/core/typography/Body"; import { H2 } from "../../../../components/core/typography/H2"; type Props = { diff --git a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx index fac529c42b4..4a94f9d85fd 100644 --- a/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/BoolValuePrerequisitesScreen.tsx @@ -1,10 +1,9 @@ -import { FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; import React from "react"; import { View } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import { SelfDeclarationBoolDTO } from "../../../../../definitions/idpay/SelfDeclarationBoolDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { Link } from "../../../../components/core/typography/Link"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; diff --git a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx index 83aaab45a3a..7b23196e9b7 100644 --- a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx +++ b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FooterWithButtons, Pictogram, VSpacer @@ -6,7 +7,6 @@ import { import React from "react"; import { SafeAreaView, StyleSheet, View } from "react-native"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import { H3 } from "../../../../components/core/typography/H3"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; diff --git a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx index e59e57654c9..c649367b01f 100644 --- a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx @@ -1,4 +1,5 @@ import { + Body, ButtonSolid, ContentWrapper, FooterWithButtons, @@ -11,7 +12,6 @@ import { pipe } from "fp-ts/lib/function"; import React from "react"; import { ScrollView, StyleSheet, View } from "react-native"; import { ServiceId } from "../../../../../definitions/backend/ServiceId"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown"; diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx index 00aa57f8dd3..66af9091757 100644 --- a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx +++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FooterWithButtons, IOColors, IOStyles, @@ -12,7 +13,6 @@ import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; diff --git a/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx index 76a91ecebeb..9b7cfec6374 100644 --- a/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineDiscountTransactionDetailsComponent.tsx @@ -1,4 +1,4 @@ -import { Alert, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Alert, Body, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; @@ -9,7 +9,6 @@ import { } from "../../../../../definitions/idpay/TransactionDetailDTO"; import CopyButtonComponent from "../../../../components/CopyButtonComponent"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; -import { Body } from "../../../../components/core/typography/Body"; import { H4 } from "../../../../components/core/typography/H4"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; diff --git a/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx index eedc0786301..7f109b4c6a0 100644 --- a/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineRefundDetailsComponent.tsx @@ -1,5 +1,5 @@ import { useBottomSheet } from "@gorhom/bottom-sheet"; -import { Alert, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Alert, Body, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; import { CommonActions } from "@react-navigation/native"; import { format } from "date-fns"; import * as O from "fp-ts/lib/Option"; @@ -10,7 +10,6 @@ import { RefundDetailDTO } from "../../../../../definitions/idpay/RefundDetailDT import { OperationTypeEnum } from "../../../../../definitions/idpay/RefundOperationDTO"; import CopyButtonComponent from "../../../../components/CopyButtonComponent"; import { IOBadge } from "../../../../components/core/IOBadge"; -import { Body } from "../../../../components/core/typography/Body"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; import NavigationService from "../../../../navigation/NavigationService"; diff --git a/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx b/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx index d4d109dfca3..8c50ea89116 100644 --- a/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx +++ b/ts/features/idpay/timeline/components/TimelineTransactionDetailsComponent.tsx @@ -2,14 +2,13 @@ import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; import { StyleSheet, View } from "react-native"; -import { Alert, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Alert, Body, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; import { TransactionDetailDTO, OperationTypeEnum as TransactionTypeEnum } from "../../../../../definitions/idpay/TransactionDetailDTO"; import CopyButtonComponent from "../../../../components/CopyButtonComponent"; import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; -import { Body } from "../../../../components/core/typography/Body"; import { H4 } from "../../../../components/core/typography/H4"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback"; diff --git a/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx b/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx index 623c892bc79..a47869a9c15 100644 --- a/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx +++ b/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx @@ -1,4 +1,5 @@ import { + Body, ContentWrapper, FooterWithButtons, IconButton, @@ -10,7 +11,6 @@ import { SafeAreaView, View } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import { InitiativeRewardTypeEnum } from "../../../../../definitions/idpay/InitiativeDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; diff --git a/ts/features/wallet/bancomat/component/BancomatWalletPreview.tsx b/ts/features/wallet/bancomat/component/BancomatWalletPreview.tsx index b7e0426799a..1ff35e29ad4 100644 --- a/ts/features/wallet/bancomat/component/BancomatWalletPreview.tsx +++ b/ts/features/wallet/bancomat/component/BancomatWalletPreview.tsx @@ -4,8 +4,8 @@ import * as React from "react"; import { Image, ImageStyle, StyleProp } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; +import { Body } from "@pagopa/io-app-design-system"; import pagoBancomatImage from "../../../../../img/wallet/cards-icons/pagobancomat.png"; -import { Body } from "../../../../components/core/typography/Body"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; import { navigateToBancomatDetailScreen } from "../../../../store/actions/navigation"; diff --git a/ts/features/wallet/bancomatpay/component/BPayWalletPreview.tsx b/ts/features/wallet/bancomatpay/component/BPayWalletPreview.tsx index de068cf4187..50be3d08887 100644 --- a/ts/features/wallet/bancomatpay/component/BPayWalletPreview.tsx +++ b/ts/features/wallet/bancomatpay/component/BPayWalletPreview.tsx @@ -1,8 +1,8 @@ import * as React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; +import { Body } from "@pagopa/io-app-design-system"; import bPayImage from "../../../../../img/wallet/cards-icons/bPay.png"; -import { Body } from "../../../../components/core/typography/Body"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; import { navigateToBPayDetailScreen } from "../../../../store/actions/navigation"; diff --git a/ts/features/wallet/cobadge/component/CobadgeWalletPreview.tsx b/ts/features/wallet/cobadge/component/CobadgeWalletPreview.tsx index ab765803f3d..d859ec617f5 100644 --- a/ts/features/wallet/cobadge/component/CobadgeWalletPreview.tsx +++ b/ts/features/wallet/cobadge/component/CobadgeWalletPreview.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { Image, ImageStyle, StyleProp } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; -import { Body } from "../../../../components/core/typography/Body"; +import { Body } from "@pagopa/io-app-design-system"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo"; import I18n from "../../../../i18n"; diff --git a/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx index 96fc29679c9..1079c335e59 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx @@ -3,6 +3,7 @@ import { View, SafeAreaView, StyleSheet } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import { connect } from "react-redux"; import { + Body, FooterWithButtons, HSpacer, VSpacer @@ -10,7 +11,6 @@ import { import { InitializedProfile } from "../../../../../../../definitions/backend/InitializedProfile"; import { PaymentInstrument } from "../../../../../../../definitions/pagopa/walletv2/PaymentInstrument"; import { InfoBox } from "../../../../../../components/box/InfoBox"; -import { Body } from "../../../../../../components/core/typography/Body"; import { H1 } from "../../../../../../components/core/typography/H1"; import { H4 } from "../../../../../../components/core/typography/H4"; import { Label } from "../../../../../../components/core/typography/Label"; diff --git a/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx b/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx index c0d98f8eab6..fa2b8c7b1b8 100644 --- a/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx +++ b/ts/features/wallet/onboarding/common/searchBank/SearchStartComponent.tsx @@ -1,7 +1,6 @@ import * as React from "react"; -import { VSpacer } from "@pagopa/io-app-design-system"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../../../../../i18n"; -import { Body } from "../../../../../components/core/typography/Body"; import { H1 } from "../../../../../components/core/typography/H1"; import { H4 } from "../../../../../components/core/typography/H4"; import { Link } from "../../../../../components/core/typography/Link"; diff --git a/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx b/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx index 258d410b080..6d27a94e09b 100644 --- a/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx +++ b/ts/features/wallet/onboarding/paypal/components/PspInfoBottomSheet.tsx @@ -1,10 +1,9 @@ import { TouchableWithoutFeedback } from "@gorhom/bottom-sheet"; -import { Icon, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, Icon, VSpacer } from "@pagopa/io-app-design-system"; import { NonNegativeNumber } from "@pagopa/ts-commons/lib/numbers"; import * as React from "react"; import { ReactNode } from "react"; import { StyleSheet, View } from "react-native"; -import { Body } from "../../../../../components/core/typography/Body"; import { Label } from "../../../../../components/core/typography/Label"; import { Link } from "../../../../../components/core/typography/Link"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; diff --git a/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx b/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx index dc5dc40bc78..e6170bc212f 100644 --- a/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx +++ b/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx @@ -1,4 +1,4 @@ -import { FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; +import { Body, FooterWithButtons, VSpacer } from "@pagopa/io-app-design-system"; import React, { useEffect, useState } from "react"; import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native"; import { connect } from "react-redux"; @@ -13,7 +13,6 @@ import { RadioButtonList, RadioItem } from "../../../../../components/core/selection/RadioButtonList"; -import { Body } from "../../../../../components/core/typography/Body"; import { H1 } from "../../../../../components/core/typography/H1"; import { H4 } from "../../../../../components/core/typography/H4"; import { Link } from "../../../../../components/core/typography/Link"; diff --git a/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx b/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx index 75372e1225b..f9bb0913c0b 100644 --- a/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx +++ b/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx @@ -1,4 +1,4 @@ -import { FooterWithButtons } from "@pagopa/io-app-design-system"; +import { Body, FooterWithButtons } from "@pagopa/io-app-design-system"; import React from "react"; import { Dimensions, SafeAreaView, View } from "react-native"; import { connect } from "react-redux"; @@ -6,7 +6,6 @@ import { Dispatch } from "redux"; import Oval from "../../../../../../img/wallet/payment-methods/paypal/oval.svg"; import PPLogo from "../../../../../../img/wallet/payment-methods/paypal/paypal_logo.svg"; import SectionStatusComponent from "../../../../../components/SectionStatus"; -import { Body } from "../../../../../components/core/typography/Body"; import { IOStyles } from "../../../../../components/core/variables/IOStyles"; import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent"; import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent"; diff --git a/ts/features/wallet/paypal/PayPalWalletPreview.tsx b/ts/features/wallet/paypal/PayPalWalletPreview.tsx index c081050afbd..f8f19d57ecd 100644 --- a/ts/features/wallet/paypal/PayPalWalletPreview.tsx +++ b/ts/features/wallet/paypal/PayPalWalletPreview.tsx @@ -1,7 +1,7 @@ import { useNavigation } from "@react-navigation/native"; import * as React from "react"; +import { Body } from "@pagopa/io-app-design-system"; import payPalCard from "../../../../img/wallet/cards-icons/paypal_card.png"; -import { Body } from "../../../components/core/typography/Body"; import { IOStyles } from "../../../components/core/variables/IOStyles"; import I18n from "../../../i18n"; import { diff --git a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx index 8cd1b487b1f..6911a9b912e 100644 --- a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx +++ b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx @@ -1,4 +1,5 @@ import { + Body, FooterWithButtons, Icon, PressableListItemBase, @@ -17,7 +18,6 @@ import { } from "react-native"; import { isError, isReady } from "../../../../common/model/RemoteValue"; import { LoadingErrorComponent } from "../../../../components/LoadingErrorComponent"; -import { Body } from "../../../../components/core/typography/Body"; import { H1 } from "../../../../components/core/typography/H1"; import { H4 } from "../../../../components/core/typography/H4"; import { Label } from "../../../../components/core/typography/Label"; diff --git a/ts/screens/authentication/TestAuthenticationScreen.tsx b/ts/screens/authentication/TestAuthenticationScreen.tsx index 1bf046ac75f..5d91a8433b0 100644 --- a/ts/screens/authentication/TestAuthenticationScreen.tsx +++ b/ts/screens/authentication/TestAuthenticationScreen.tsx @@ -1,5 +1,6 @@ import { Alert, + Body, IOColors, TextInputPassword, TextInputValidation, @@ -15,7 +16,6 @@ import { pipe } from "fp-ts/lib/function"; import React, { useCallback, useState } from "react"; import { StyleSheet, View } from "react-native"; import { PasswordLogin } from "../../../definitions/session_manager/PasswordLogin"; -import { Body } from "../../components/core/typography/Body"; import { IOStyles } from "../../components/core/variables/IOStyles"; import ActivityIndicator from "../../components/ui/ActivityIndicator"; import I18n from "../../i18n"; diff --git a/ts/screens/authentication/cie/CieCardReaderScreen.tsx b/ts/screens/authentication/cie/CieCardReaderScreen.tsx index 543762bb817..4946c9ce409 100644 --- a/ts/screens/authentication/cie/CieCardReaderScreen.tsx +++ b/ts/screens/authentication/cie/CieCardReaderScreen.tsx @@ -4,6 +4,7 @@ * TODO: when 100% is reached, the animation end */ import { + Body, ButtonLink, ButtonSolid, ContentWrapper, @@ -33,7 +34,6 @@ import { useFocusEffect } from "@react-navigation/native"; import CieCardReadingAnimation, { ReadingState } from "../../../components/cie/CieCardReadingAnimation"; -import { Body } from "../../../components/core/typography/Body"; import { isCieLoginUatEnabledSelector } from "../../../features/cieLogin/store/selectors"; import { getCieUatEndpoint } from "../../../features/cieLogin/utils/endpoints"; import I18n from "../../../i18n"; diff --git a/ts/screens/modal/IdentificationLockModal.tsx b/ts/screens/modal/IdentificationLockModal.tsx index 0ffb349fbf5..c05fc31a4f1 100644 --- a/ts/screens/modal/IdentificationLockModal.tsx +++ b/ts/screens/modal/IdentificationLockModal.tsx @@ -4,11 +4,11 @@ import { useEffect } from "react"; import { View, Modal, StyleSheet, SafeAreaView } from "react-native"; import { ContentWrapper, + H4, LabelSmall, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; -import { H3 } from "../../components/core/typography/H3"; import { IOStyles } from "../../components/core/variables/IOStyles"; import I18n from "../../i18n"; import { useIODispatch } from "../../store/hooks"; @@ -87,12 +87,12 @@ export const IdentificationLockModal = (props: Props) => { -

{tooManyAttemptsText} -

+ { {isDevEnv && ( <> -

Iniziative di test

+

Iniziative di test

Iniziative disponibili tramite io-dev-server {testServices.map(srv => ( { alignItems: "center" }} > -