From 37f60a0e28791a206100276a47227adda8678d52 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 10:10:46 +0200 Subject: [PATCH 1/8] Creating showcase for advices, banners and alerts --- example/src/components/FeatureInfo.tsx | 73 +++++ example/src/navigation/navigator.tsx | 8 + example/src/pages/Advice.tsx | 304 ++++++++++++++++++ example/src/pages/Alert.tsx | 263 +++++++++++++++ src/components/index.tsx | 6 +- .../sectionStatus/StatusContent.tsx | 97 ++++++ .../__snapshots__/statusContent.test.tsx.snap | 117 +++++++ .../__test__/statusContent.test.tsx | 11 + src/components/sectionStatus/index.tsx | 1 + src/index.tsx | 1 + 10 files changed, 880 insertions(+), 1 deletion(-) create mode 100644 example/src/components/FeatureInfo.tsx create mode 100644 example/src/pages/Advice.tsx create mode 100644 example/src/pages/Alert.tsx create mode 100644 src/components/sectionStatus/StatusContent.tsx create mode 100644 src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap create mode 100644 src/components/sectionStatus/__test__/statusContent.test.tsx create mode 100644 src/components/sectionStatus/index.tsx diff --git a/example/src/components/FeatureInfo.tsx b/example/src/components/FeatureInfo.tsx new file mode 100644 index 00000000..2f33b709 --- /dev/null +++ b/example/src/components/FeatureInfo.tsx @@ -0,0 +1,73 @@ +import { HSpacer, IOIconSizeScale, IOIcons, IOPictogramSizeScale, IOPictograms, IOStyles, Icon, LabelSmall, Link, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; +import React from "react"; +import { GestureResponderEvent, View } from "react-native"; + +type PartialFeatureInfo = { + // Necessary to render main body with different formatting + body?: string | React.ReactNode; +}; + +type FeatureInfoActionProps = + | { + actionLabel?: string; + actionOnPress: (event: GestureResponderEvent) => void; + } + | { + actionLabel?: never; + actionOnPress?: never; + }; + +type FeatureInfoGraphicProps = + | { iconName?: never; pictogramName: IOPictograms } + | { iconName: IOIcons; pictogramName?: never }; + +type FeatureInfo = FeatureInfoGraphicProps & + PartialFeatureInfo & + FeatureInfoActionProps; + +const DEFAULT_ICON_SIZE: IOIconSizeScale = 24; +const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48; + +const renderNode = (body: FeatureInfo["body"]) => { + if (typeof body === "string") { + return ( + + {body} + + ); + } + + return body; +}; + +export const FeatureInfo = ({ + iconName, + pictogramName, + body, + actionLabel, + actionOnPress +}: FeatureInfo) => ( + + {iconName && ( + + )} + {pictogramName && ( + + )} + + + {renderNode(body)} + {actionLabel && actionOnPress && ( + <> + {/* Add "marginTop" equivalent if body text is present. + This verbose code could be deleted once we got "gap" + property support */} + {body && } + + {actionLabel} + + + )} + + +); diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 0a94176e..548d8c17 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -3,6 +3,8 @@ import React from "react"; import { Icons } from "../pages/Icons"; import { Logos } from "../pages/Logos"; +import { Advice } from "../pages/Advice"; +import { DSAlert } from "../pages/Alert"; import MainScreen from "../pages/MainScreen"; import { AppParamsList } from "./params"; import APP_ROUTES from "./routes"; @@ -23,6 +25,12 @@ const AppNavigator = () => ( + + ); diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx new file mode 100644 index 00000000..4455bb97 --- /dev/null +++ b/example/src/pages/Advice.tsx @@ -0,0 +1,304 @@ +import { Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; +import React from "react"; +import { Alert, View } from "react-native"; +import { ComponentViewerBox } from "../components/ComponentViewerBox"; +import { FeatureInfo } from "../components/FeatureInfo"; +import { Screen } from "../components/Screen"; + +// const styles = StyleSheet.create({ +// content: { +// flex: 1, +// width: "100%", +// justifySelf: "flex-start", +// flexDirection: "row", +// flexWrap: "wrap", +// justifyContent: "space-around" +// } +// }); + +const onLinkPress = () => { + Alert.alert("Alert", "Action triggered"); +}; + +const onClose = () => { + Alert.alert("Alert", "Component dismissed"); +}; + +type BannerProps = WithTestID<{ + size: "big" | "small"; + color: "neutral" | "turquoise"; + pictogramName: IOPictogramsBleed; + viewRef: React.RefObject; + accessibilityLabel?: string; + accessibilityHint?: string; +}>; + +const bannerBackgroundColours: Array = [ + "neutral", + "turquoise" +]; + +export const Advice = () => ( + + {renderFeatureInfo()} + + + + {renderBanner()} + + + {/*

+ Legacy components +

+ + + + + + Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod + tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut + aliquid ex ea commodi consequatur. + + + + +
+ { + "Per verificare la tua carta, tratteniamo € 0.02. Non preoccuparti: ti restituiremo l'importo al più presto." + } +
+
+ } + title={"Title"} + body={ + + Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod + tempor incidunt ut labore et dolore magna aliqua. + + } + /> + + + + + + + + + + + + + */} +
+); + +const renderFeatureInfo = () => ( + <> +

+ FeatureInfo +

+ + + + + + + + + + + + + + + + +); + +const renderBanner = () => { + const viewRef = React.createRef(); + + return ( + <> +

+ Banner +

+ {bannerBackgroundColours.map(color => ( + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + + ); +}; diff --git a/example/src/pages/Alert.tsx b/example/src/pages/Alert.tsx new file mode 100644 index 00000000..ce0e86a4 --- /dev/null +++ b/example/src/pages/Alert.tsx @@ -0,0 +1,263 @@ +import { Alert, H2, VSpacer, StatusContent, statusColorMap, getStatusTextColor, LevelEnum, statusIconMap } from "@pagopa/io-app-design-system"; +import React from "react"; +import { View } from "react-native"; +import { FullWidthComponent } from "../components/FullWidthComponent"; +import { Screen } from "../components/Screen"; +export const DSAlert = () => { + const viewRef = React.createRef(); + + return ( + + {/* Content only */} +

+ Content only +

+ + + + + + + + + + + + + + + + +

+ Title + Content +

+ + + + + + + + + + + + + + + + + + + + + +

+ Content + Action +

+ + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + {/* Full width */} +

+ Full width +

+ + + + + + + + + + + + + + + + + + + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco labo nisi ut aliquid ad minim veniam" + /> + + + + +

+ Legacy components +

+ + + { + "L’invio dei Certificati Verdi è in corso e potrebbe richiedere diversi giorni." + } + + + + + + + {"La sezione Messaggi è in manutenzione, tornerà operativa a breve"} + + + + + + { + "I nostri sistemi potrebbero rispondere con lentezza, ci scusiamo per il disagio." + } + + + + +
+ ); +}; diff --git a/src/components/index.tsx b/src/components/index.tsx index 4104c923..80ff8171 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -15,4 +15,8 @@ export * from "./buttons"; export * from "./listitems"; export * from "./tag"; export * from "./alert"; -export * from "./logos"; \ No newline at end of file +export * from "./logos"; +export * from "./sectionStatus"; +export * from "./advice"; +export * from "./banner"; +export * from "./box"; \ No newline at end of file diff --git a/src/components/sectionStatus/StatusContent.tsx b/src/components/sectionStatus/StatusContent.tsx new file mode 100644 index 00000000..f6cc134c --- /dev/null +++ b/src/components/sectionStatus/StatusContent.tsx @@ -0,0 +1,97 @@ +import React, { ComponentProps } from "react"; +import { AccessibilityRole, StyleSheet, View } from "react-native"; +import { IOColors } from "../../core/IOColors"; +import { WithTestID } from "../../utils/types"; +import { IOIcons, Icon } from "../icons"; +import { Label } from "../typography"; + +const iconSize = 24; + +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + width: "100%", + paddingLeft: 24, + paddingRight: 24, + paddingBottom: 8, + paddingTop: 8, + alignItems: "flex-start", + alignContent: "center" + }, + alignCenter: { alignSelf: "center" }, + text: { marginLeft: 16, flex: 1 } +}); + +type Props = WithTestID<{ + accessible?: boolean; + accessibilityHint?: string; + accessibilityLabel?: string; + accessibilityRole?: AccessibilityRole; + backgroundColor: IOColors; + iconName: IOIcons; + viewRef: React.RefObject; + foregroundColor: ComponentProps["color"]; + labelPaddingVertical?: number; +}>; + +export const StatusContent: React.FC = ({ + accessible, + accessibilityHint, + accessibilityLabel, + accessibilityRole, + backgroundColor, + children, + iconName, + viewRef, + foregroundColor, + labelPaddingVertical +}) => ( + + + + + + +); + +export enum LevelEnum { + "critical" = "critical", + + "warning" = "warning", + + "normal" = "normal" +} + +export const statusColorMap: Record = { + [LevelEnum.normal]: "aqua", + [LevelEnum.critical]: "red", + [LevelEnum.warning]: "orange" +}; + +export const statusIconMap: Record = { + [LevelEnum.normal]: "ok", + [LevelEnum.critical]: "notice", + [LevelEnum.warning]: "info" +}; + +export const getStatusTextColor = ( + level: LevelEnum +): "bluegreyDark" | "white" => + level === LevelEnum.normal ? "bluegreyDark" : "white"; \ No newline at end of file diff --git a/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap b/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap new file mode 100644 index 00000000..56b2975e --- /dev/null +++ b/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap @@ -0,0 +1,117 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Advice Components StatusContent Snapshot 1`] = ` + + + + + + + + + + +`; diff --git a/src/components/sectionStatus/__test__/statusContent.test.tsx b/src/components/sectionStatus/__test__/statusContent.test.tsx new file mode 100644 index 00000000..6215c828 --- /dev/null +++ b/src/components/sectionStatus/__test__/statusContent.test.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import { View } from "react-native"; +import * as TestRenderer from "react-test-renderer"; +import { StatusContent } from "../StatusContent"; +const viewRef = React.createRef(); +describe("Test Advice Components", () => { + it("StatusContent Snapshot", () => { + const statusContent = TestRenderer.create().toJSON(); + expect(statusContent).toMatchSnapshot(); + }); +}); diff --git a/src/components/sectionStatus/index.tsx b/src/components/sectionStatus/index.tsx new file mode 100644 index 00000000..16798c33 --- /dev/null +++ b/src/components/sectionStatus/index.tsx @@ -0,0 +1 @@ +export * from "./StatusContent"; diff --git a/src/index.tsx b/src/index.tsx index 8be11165..67111480 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ export * from "./core"; export * from "./components"; export * from "./functions"; +export * from "./utils/types"; From d753131cb5f57b88cf44d79b5334f47937912995 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 10:31:06 +0200 Subject: [PATCH 2/8] Fixing checks errors --- example/src/components/FullWidthComponent.tsx | 17 +++++++++++++++++ src/components/index.tsx | 3 +-- 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 example/src/components/FullWidthComponent.tsx diff --git a/example/src/components/FullWidthComponent.tsx b/example/src/components/FullWidthComponent.tsx new file mode 100644 index 00000000..fbadc335 --- /dev/null +++ b/example/src/components/FullWidthComponent.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { StyleSheet, View } from "react-native"; + +type Props = { + children: React.ReactNode; +}; +const contentPadding = 24; +const styles = StyleSheet.create({ + container: { + marginLeft: contentPadding * -1, + marginRight: contentPadding * -1 + } +}); + +export const FullWidthComponent = ({ children }: Props) => ( + {children} +); diff --git a/src/components/index.tsx b/src/components/index.tsx index 80ff8171..0912c146 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -18,5 +18,4 @@ export * from "./alert"; export * from "./logos"; export * from "./sectionStatus"; export * from "./advice"; -export * from "./banner"; -export * from "./box"; \ No newline at end of file +export * from "./banner"; \ No newline at end of file From 6d19acef65f658bc01aa1181bf38e884b1842104 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 10:37:34 +0200 Subject: [PATCH 3/8] Fixing error checks --- src/components/Advice/Advice.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Advice/Advice.tsx b/src/components/Advice/Advice.tsx index 37824261..6056d54d 100644 --- a/src/components/Advice/Advice.tsx +++ b/src/components/Advice/Advice.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { View, StyleSheet } from "react-native"; -import { IOIconSizeScale, IOIcons, Icon } from "../icons"; +import { StyleSheet, View } from "react-native"; import { IOColors, IOStyles } from "../../core"; +import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { HSpacer } from "../spacer"; import { Body } from "../typography"; @@ -24,7 +24,7 @@ const defaultIconSize: IOIconSizeScale = 20; * This component displays an info icon on top-left and a text message * @constructor */ -const AdviceComponent: React.FC = ({ +export const AdviceComponent: React.FC = React.memo(({ text, iconName = "notice", iconSize = defaultIconSize, @@ -41,6 +41,4 @@ const AdviceComponent: React.FC = ({ {text} -); - -export default React.memo(AdviceComponent); +)); \ No newline at end of file From e0c64261048349f3994c20faad4b2ab74ecddaca Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 10:43:57 +0200 Subject: [PATCH 4/8] Fixing checks errors --- src/components/Advice/Advice.tsx | 2 +- src/components/Advice/__test__/advice.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Advice/Advice.tsx b/src/components/Advice/Advice.tsx index 6056d54d..de499d3d 100644 --- a/src/components/Advice/Advice.tsx +++ b/src/components/Advice/Advice.tsx @@ -24,7 +24,7 @@ const defaultIconSize: IOIconSizeScale = 20; * This component displays an info icon on top-left and a text message * @constructor */ -export const AdviceComponent: React.FC = React.memo(({ +export const Advice: React.FC = React.memo(({ text, iconName = "notice", iconSize = defaultIconSize, diff --git a/src/components/Advice/__test__/advice.test.tsx b/src/components/Advice/__test__/advice.test.tsx index efffcedf..0a864b64 100644 --- a/src/components/Advice/__test__/advice.test.tsx +++ b/src/components/Advice/__test__/advice.test.tsx @@ -1,6 +1,6 @@ import React from "react"; import * as TestRenderer from "react-test-renderer"; -import Advice from "../Advice"; +import { Advice } from "../Advice"; describe("Test Advice Components", () => { it("Advice Snapshot", () => { From 2e2ecf2b6f8480e2ac448b7c5b5ead5b8c9b4eb9 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 11:07:24 +0200 Subject: [PATCH 5/8] Adding Advice to the example app --- example/src/pages/Advice.tsx | 61 +++--------------------------------- 1 file changed, 5 insertions(+), 56 deletions(-) diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index 4455bb97..2af60730 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -1,4 +1,4 @@ -import { Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; +import { Advice, Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; import React from "react"; import { Alert, View } from "react-native"; import { ComponentViewerBox } from "../components/ComponentViewerBox"; @@ -38,7 +38,7 @@ const bannerBackgroundColours: Array = [ "turquoise" ]; -export const Advice = () => ( +export const DSAdvice = () => ( {renderFeatureInfo()} @@ -47,66 +47,15 @@ export const Advice = () => ( {renderBanner()} - {/*

+

Legacy components

- - - - - - Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod - tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut - aliquid ex ea commodi consequatur. - - - - -
- { - "Per verificare la tua carta, tratteniamo € 0.02. Non preoccuparti: ti restituiremo l'importo al più presto." - } -
-
- } - title={"Title"} - body={ - - Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod - tempor incidunt ut labore et dolore magna aliqua. - - } - /> - - - - - - - - - - - - - */} +
); From 6fbe66e66c6c1f7b06fcd9e43873944672323aeb Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 11:14:00 +0200 Subject: [PATCH 6/8] Fixing checks error --- example/src/navigation/navigator.tsx | 4 ++-- example/src/pages/Advice.tsx | 15 ++------------- src/components/Advice/Advice.tsx | 2 +- 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 548d8c17..37f5bc29 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -3,7 +3,7 @@ import React from "react"; import { Icons } from "../pages/Icons"; import { Logos } from "../pages/Logos"; -import { Advice } from "../pages/Advice"; +import { DSAdvice } from "../pages/Advice"; import { DSAlert } from "../pages/Alert"; import MainScreen from "../pages/MainScreen"; import { AppParamsList } from "./params"; @@ -25,7 +25,7 @@ const AppNavigator = () => ( - { Alert.alert("Alert", "Action triggered"); }; @@ -50,7 +39,7 @@ export const DSAdvice = () => (

Legacy components

- = React.memo(({ +export const AdviceComponent: React.FC = React.memo(({ text, iconName = "notice", iconSize = defaultIconSize, From 0393b7996d668c17eac08432ffa4ad7e46b6b453 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Tue, 18 Jul 2023 11:18:53 +0200 Subject: [PATCH 7/8] Fixing error checks --- example/src/pages/Advice.tsx | 11 +---------- src/components/Advice/Advice.tsx | 2 +- src/components/index.tsx | 1 - 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index 9cea9f35..b57d7e99 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -1,4 +1,4 @@ -import { AdviceComponent, Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; +import { Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; import React from "react"; import { Alert, View } from "react-native"; import { ComponentViewerBox } from "../components/ComponentViewerBox"; @@ -36,15 +36,6 @@ export const DSAdvice = () => ( {renderBanner()} -

- Legacy components -

- - ); diff --git a/src/components/Advice/Advice.tsx b/src/components/Advice/Advice.tsx index 6056d54d..de499d3d 100644 --- a/src/components/Advice/Advice.tsx +++ b/src/components/Advice/Advice.tsx @@ -24,7 +24,7 @@ const defaultIconSize: IOIconSizeScale = 20; * This component displays an info icon on top-left and a text message * @constructor */ -export const AdviceComponent: React.FC = React.memo(({ +export const Advice: React.FC = React.memo(({ text, iconName = "notice", iconSize = defaultIconSize, diff --git a/src/components/index.tsx b/src/components/index.tsx index 0912c146..3b6bdd06 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -17,5 +17,4 @@ export * from "./tag"; export * from "./alert"; export * from "./logos"; export * from "./sectionStatus"; -export * from "./advice"; export * from "./banner"; \ No newline at end of file From 55f5f461ec84cb96bcd512897596596c03602653 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Fri, 21 Jul 2023 10:10:14 +0200 Subject: [PATCH 8/8] Removing legacy components --- example/src/components/FeatureInfo.tsx | 104 ++-- example/src/components/FullWidthComponent.tsx | 12 +- example/src/navigation/navigator.tsx | 76 ++- example/src/pages/Advice.tsx | 396 +++++++-------- example/src/pages/Alert.tsx | 465 ++++++++---------- src/components/Advice/Advice.tsx | 38 +- .../Advice/__test__/advice.test.tsx | 4 +- src/components/index.tsx | 28 +- .../sectionStatus/StatusContent.tsx | 97 ---- .../__snapshots__/statusContent.test.tsx.snap | 117 ----- .../__test__/statusContent.test.tsx | 11 - src/components/sectionStatus/index.tsx | 1 - 12 files changed, 563 insertions(+), 786 deletions(-) delete mode 100644 src/components/sectionStatus/StatusContent.tsx delete mode 100644 src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap delete mode 100644 src/components/sectionStatus/__test__/statusContent.test.tsx delete mode 100644 src/components/sectionStatus/index.tsx diff --git a/example/src/components/FeatureInfo.tsx b/example/src/components/FeatureInfo.tsx index 2f33b709..6ee24ad4 100644 --- a/example/src/components/FeatureInfo.tsx +++ b/example/src/components/FeatureInfo.tsx @@ -1,73 +1,85 @@ -import { HSpacer, IOIconSizeScale, IOIcons, IOPictogramSizeScale, IOPictograms, IOStyles, Icon, LabelSmall, Link, Pictogram, VSpacer } from "@pagopa/io-app-design-system"; +import { + HSpacer, + IOIconSizeScale, + IOIcons, + IOPictogramSizeScale, + IOPictograms, + IOStyles, + Icon, + LabelSmall, + Link, + Pictogram, + VSpacer +} from "@pagopa/io-app-design-system"; import React from "react"; import { GestureResponderEvent, View } from "react-native"; type PartialFeatureInfo = { - // Necessary to render main body with different formatting - body?: string | React.ReactNode; + // Necessary to render main body with different formatting + body?: string | React.ReactNode; }; type FeatureInfoActionProps = - | { - actionLabel?: string; - actionOnPress: (event: GestureResponderEvent) => void; + | { + actionLabel?: string; + actionOnPress: (event: GestureResponderEvent) => void; } - | { - actionLabel?: never; - actionOnPress?: never; + | { + actionLabel?: never; + actionOnPress?: never; }; type FeatureInfoGraphicProps = - | { iconName?: never; pictogramName: IOPictograms } - | { iconName: IOIcons; pictogramName?: never }; + | { iconName?: never; pictogramName: IOPictograms } + | { iconName: IOIcons; pictogramName?: never }; type FeatureInfo = FeatureInfoGraphicProps & - PartialFeatureInfo & - FeatureInfoActionProps; + PartialFeatureInfo & + FeatureInfoActionProps; const DEFAULT_ICON_SIZE: IOIconSizeScale = 24; const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48; const renderNode = (body: FeatureInfo["body"]) => { - if (typeof body === "string") { - return ( - - {body} - - ); - } + if (typeof body === "string") { + return ( + + {body} + + ); + } - return body; + return body; }; export const FeatureInfo = ({ - iconName, - pictogramName, - body, - actionLabel, - actionOnPress + iconName, + pictogramName, + body, + actionLabel, + actionOnPress }: FeatureInfo) => ( - - {iconName && ( - - )} - {pictogramName && ( - - )} - - - {renderNode(body)} - {actionLabel && actionOnPress && ( - <> - {/* Add "marginTop" equivalent if body text is present. + + {iconName && ( + + )} + {pictogramName && ( + + )} + + + {renderNode(body)} + {actionLabel && actionOnPress && ( + <> + {/* Add "marginTop" equivalent if body text is present. This verbose code could be deleted once we got "gap" property support */} - {body && } - - {actionLabel} - - - )} - + {body && } + + {actionLabel} + + + )} + ); diff --git a/example/src/components/FullWidthComponent.tsx b/example/src/components/FullWidthComponent.tsx index fbadc335..0ea3e31b 100644 --- a/example/src/components/FullWidthComponent.tsx +++ b/example/src/components/FullWidthComponent.tsx @@ -2,16 +2,16 @@ import React from "react"; import { StyleSheet, View } from "react-native"; type Props = { - children: React.ReactNode; + children: React.ReactNode; }; const contentPadding = 24; const styles = StyleSheet.create({ - container: { - marginLeft: contentPadding * -1, - marginRight: contentPadding * -1 - } + container: { + marginLeft: contentPadding * -1, + marginRight: contentPadding * -1 + } }); export const FullWidthComponent = ({ children }: Props) => ( - {children} + {children} ); diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 7c7325ad..53e50e8e 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -18,27 +18,61 @@ const AppNavigator = () => ( initialRouteName={APP_ROUTES.MAIN} screenOptions={{ headerShown: true }} > - - - - - - - + + + + + + + ); diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index b57d7e99..0634f40c 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -1,4 +1,10 @@ -import { Banner, H2, IOPictogramsBleed, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; +import { + Banner, + H2, + IOPictogramsBleed, + VSpacer, + WithTestID +} from "@pagopa/io-app-design-system"; import React from "react"; import { Alert, View } from "react-native"; import { ComponentViewerBox } from "../components/ComponentViewerBox"; @@ -6,228 +12,228 @@ import { FeatureInfo } from "../components/FeatureInfo"; import { Screen } from "../components/Screen"; const onLinkPress = () => { - Alert.alert("Alert", "Action triggered"); + Alert.alert("Alert", "Action triggered"); }; const onClose = () => { - Alert.alert("Alert", "Component dismissed"); + Alert.alert("Alert", "Component dismissed"); }; type BannerProps = WithTestID<{ - size: "big" | "small"; - color: "neutral" | "turquoise"; - pictogramName: IOPictogramsBleed; - viewRef: React.RefObject; - accessibilityLabel?: string; - accessibilityHint?: string; + size: "big" | "small"; + color: "neutral" | "turquoise"; + pictogramName: IOPictogramsBleed; + viewRef: React.RefObject; + accessibilityLabel?: string; + accessibilityHint?: string; }>; const bannerBackgroundColours: Array = [ - "neutral", - "turquoise" + "neutral", + "turquoise" ]; export const DSAdvice = () => ( - - {renderFeatureInfo()} + + {renderFeatureInfo()} - + - {renderBanner()} + {renderBanner()} - - + + ); const renderFeatureInfo = () => ( + <> +

+ FeatureInfo +

+ + + + + + + + + + + + + + + + +); + +const renderBanner = () => { + const viewRef = React.createRef(); + + return ( <> -

- FeatureInfo -

- - + Banner + + {bannerBackgroundColours.map(color => ( + + + - - - - - - + - + + + - - + + + + + + + + + + ))} -); - -const renderBanner = () => { - const viewRef = React.createRef(); - - return ( - <> -

- Banner -

- {bannerBackgroundColours.map(color => ( - - - - - - - - - - - - - - - - - - - - - - - - - - ))} - - ); + ); }; diff --git a/example/src/pages/Alert.tsx b/example/src/pages/Alert.tsx index ce0e86a4..3be50e41 100644 --- a/example/src/pages/Alert.tsx +++ b/example/src/pages/Alert.tsx @@ -1,263 +1,214 @@ -import { Alert, H2, VSpacer, StatusContent, statusColorMap, getStatusTextColor, LevelEnum, statusIconMap } from "@pagopa/io-app-design-system"; +import { Alert, H2, VSpacer } from "@pagopa/io-app-design-system"; import React from "react"; import { View } from "react-native"; import { FullWidthComponent } from "../components/FullWidthComponent"; import { Screen } from "../components/Screen"; export const DSAlert = () => { - const viewRef = React.createRef(); - - return ( - - {/* Content only */} -

- Content only -

- - - - - - - - - - - - - - - - -

- Title + Content -

- - - - - - - - - - - - - - - - - - - - - -

- Content + Action -

- - { - alert("Action triggered"); - }} - content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" - /> - - - - { - alert("Action triggered"); - }} - content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" - /> - - - - { - alert("Action triggered"); - }} - content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" - /> - - - - { - alert("Action triggered"); - }} - content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" - /> - - - - {/* Full width */} -

- Full width -

- - - - - - - - - - - - - - - - - - - - - - { - alert("Action triggered"); - }} - content="Ut enim ad minim veniam, quis ullamco labo nisi ut aliquid ad minim veniam" - /> - - - - -

- Legacy components -

- - - { - "L’invio dei Certificati Verdi è in corso e potrebbe richiedere diversi giorni." - } - - - - - - - {"La sezione Messaggi è in manutenzione, tornerà operativa a breve"} - - - - - - { - "I nostri sistemi potrebbero rispondere con lentezza, ci scusiamo per il disagio." - } - - - - -
- ); + const viewRef = React.createRef(); + + return ( + + {/* Content only */} +

+ Content only +

+ + + + + + + + + + + + + + + + +

+ Title + Content +

+ + + + + + + + + + + + + + + + + + + + + +

+ Content + Action +

+ + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid" + /> + + + + {/* Full width */} +

+ Full width +

+ + + + + + + + + + + + + + + + + + + + + + { + alert("Action triggered"); + }} + content="Ut enim ad minim veniam, quis ullamco labo nisi ut aliquid ad minim veniam" + /> + + + +
+ ); }; diff --git a/src/components/Advice/Advice.tsx b/src/components/Advice/Advice.tsx index de499d3d..0b55d901 100644 --- a/src/components/Advice/Advice.tsx +++ b/src/components/Advice/Advice.tsx @@ -6,16 +6,16 @@ import { HSpacer } from "../spacer"; import { Body } from "../typography"; interface Props { - text: string; - iconName?: IOIcons; - iconSize?: IOIconSizeScale; - iconColor?: IOColors; -}; + text: string; + iconName?: IOIcons; + iconSize?: IOIconSizeScale; + iconColor?: IOColors; +} const styles = StyleSheet.create({ - icon: { - marginTop: 4 - } + icon: { + marginTop: 4 + } }); const defaultIconSize: IOIconSizeScale = 20; @@ -24,21 +24,19 @@ const defaultIconSize: IOIconSizeScale = 20; * This component displays an info icon on top-left and a text message * @constructor */ -export const Advice: React.FC = React.memo(({ +export const Advice: React.FC = React.memo( + ({ text, iconName = "notice", iconSize = defaultIconSize, iconColor = "blue" -}) => ( + }) => ( - - - - - {text} + + + + + {text} -)); \ No newline at end of file + ) +); diff --git a/src/components/Advice/__test__/advice.test.tsx b/src/components/Advice/__test__/advice.test.tsx index 0a864b64..196cab89 100644 --- a/src/components/Advice/__test__/advice.test.tsx +++ b/src/components/Advice/__test__/advice.test.tsx @@ -4,7 +4,9 @@ import { Advice } from "../Advice"; describe("Test Advice Components", () => { it("Advice Snapshot", () => { - const advice = TestRenderer.create().toJSON(); + const advice = TestRenderer.create( + + ).toJSON(); expect(advice).toMatchSnapshot(); }); }); diff --git a/src/components/index.tsx b/src/components/index.tsx index 382f87eb..d1a92793 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,19 +1,19 @@ -export * from "./pictograms"; -export * from "./icons"; -export * from "./checkbox"; -export * from "./radio"; -export * from "./switch"; -export * from "./divider"; -export * from "./contentWrapper"; -export * from "./typography"; -export * from "./spacer"; -export * from "./avatar"; export * from "./accordion"; +export * from "./alert"; +export * from "./avatar"; export * from "./badge"; +export * from "./banner"; export * from "./buttons"; +export * from "./checkbox"; +export * from "./contentWrapper"; +export * from "./divider"; +export * from "./icons"; export * from "./listitems"; -export * from "./tag"; -export * from "./alert"; export * from "./logos"; -export * from "./sectionStatus"; -export * from "./banner"; +export * from "./pictograms"; +export * from "./radio"; +export * from "./spacer"; +export * from "./switch"; +export * from "./tag"; +export * from "./typography"; + diff --git a/src/components/sectionStatus/StatusContent.tsx b/src/components/sectionStatus/StatusContent.tsx deleted file mode 100644 index f6cc134c..00000000 --- a/src/components/sectionStatus/StatusContent.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { ComponentProps } from "react"; -import { AccessibilityRole, StyleSheet, View } from "react-native"; -import { IOColors } from "../../core/IOColors"; -import { WithTestID } from "../../utils/types"; -import { IOIcons, Icon } from "../icons"; -import { Label } from "../typography"; - -const iconSize = 24; - -const styles = StyleSheet.create({ - container: { - flexDirection: "row", - width: "100%", - paddingLeft: 24, - paddingRight: 24, - paddingBottom: 8, - paddingTop: 8, - alignItems: "flex-start", - alignContent: "center" - }, - alignCenter: { alignSelf: "center" }, - text: { marginLeft: 16, flex: 1 } -}); - -type Props = WithTestID<{ - accessible?: boolean; - accessibilityHint?: string; - accessibilityLabel?: string; - accessibilityRole?: AccessibilityRole; - backgroundColor: IOColors; - iconName: IOIcons; - viewRef: React.RefObject; - foregroundColor: ComponentProps["color"]; - labelPaddingVertical?: number; -}>; - -export const StatusContent: React.FC = ({ - accessible, - accessibilityHint, - accessibilityLabel, - accessibilityRole, - backgroundColor, - children, - iconName, - viewRef, - foregroundColor, - labelPaddingVertical -}) => ( - - - - - - -); - -export enum LevelEnum { - "critical" = "critical", - - "warning" = "warning", - - "normal" = "normal" -} - -export const statusColorMap: Record = { - [LevelEnum.normal]: "aqua", - [LevelEnum.critical]: "red", - [LevelEnum.warning]: "orange" -}; - -export const statusIconMap: Record = { - [LevelEnum.normal]: "ok", - [LevelEnum.critical]: "notice", - [LevelEnum.warning]: "info" -}; - -export const getStatusTextColor = ( - level: LevelEnum -): "bluegreyDark" | "white" => - level === LevelEnum.normal ? "bluegreyDark" : "white"; \ No newline at end of file diff --git a/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap b/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap deleted file mode 100644 index 56b2975e..00000000 --- a/src/components/sectionStatus/__test__/__snapshots__/statusContent.test.tsx.snap +++ /dev/null @@ -1,117 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Test Advice Components StatusContent Snapshot 1`] = ` - - - - - - - - - - -`; diff --git a/src/components/sectionStatus/__test__/statusContent.test.tsx b/src/components/sectionStatus/__test__/statusContent.test.tsx deleted file mode 100644 index 6215c828..00000000 --- a/src/components/sectionStatus/__test__/statusContent.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { View } from "react-native"; -import * as TestRenderer from "react-test-renderer"; -import { StatusContent } from "../StatusContent"; -const viewRef = React.createRef(); -describe("Test Advice Components", () => { - it("StatusContent Snapshot", () => { - const statusContent = TestRenderer.create().toJSON(); - expect(statusContent).toMatchSnapshot(); - }); -}); diff --git a/src/components/sectionStatus/index.tsx b/src/components/sectionStatus/index.tsx deleted file mode 100644 index 16798c33..00000000 --- a/src/components/sectionStatus/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "./StatusContent";