From f44e6888d7ad958f917acc0f83918307e38b6e2a Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Thu, 14 Sep 2023 11:10:06 +0200 Subject: [PATCH 1/3] Adding legacy components to list items --- example/src/pages/ListItem.tsx | 126 ++++++++++-------- src/components/listitems/ListItemAction.tsx | 69 ++++++++-- src/components/listitems/ListItemInfo.tsx | 66 +++++++-- src/components/listitems/ListItemInfoCopy.tsx | 85 +++++++++--- src/components/listitems/ListItemNav.tsx | 72 ++++++++-- src/components/listitems/ListItemNavAlert.tsx | 59 ++++++-- 6 files changed, 355 insertions(+), 122 deletions(-) diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx index aec3d446..02b61ee4 100644 --- a/example/src/pages/ListItem.tsx +++ b/example/src/pages/ListItem.tsx @@ -10,8 +10,10 @@ import { ListItemInfoCopy, ListItemNav, ListItemNavAlert, + ListItemSwitch, ListItemTransaction, - VSpacer + VSpacer, + useIOExperimentalDesign } from "@pagopa/io-app-design-system"; import * as React from "react"; import { Alert, ImageSourcePropType, View } from "react-native"; @@ -22,68 +24,76 @@ const onButtonPress = () => { Alert.alert("Alert", "Action triggered"); }; -export const ListItems = () => ( - - {theme => ( - -

- ListItemNav -

- {renderListItemNav()} +export const ListItems = () => { + const { isExperimental, setExperimental } = useIOExperimentalDesign(); + return ( + + {theme => ( + +

+ ListItemNav +

+ + {renderListItemNav()} -

- ListItemInfoCopy -

- {renderListItemInfoCopy()} +

+ ListItemInfoCopy +

+ {renderListItemInfoCopy()} -

- ListItemInfo -

- {renderListItemInfo()} +

+ ListItemInfo +

+ {renderListItemInfo()} -

- ListItemAction -

- {renderListItemAction()} +

+ ListItemAction +

+ {renderListItemAction()} -

- ListItemIDP -

- {renderListItemIDP()} +

+ ListItemIDP +

+ {renderListItemIDP()} -

- ListItemTransaction -

- {renderListItemTransaction()} - - - )} - -); +

+ ListItemTransaction +

+ {renderListItemTransaction()} + + + )} + + ); +}; const renderListItemNav = () => ( <> diff --git a/src/components/listitems/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx index 39be92d4..ec53185f 100644 --- a/src/components/listitems/ListItemAction.tsx +++ b/src/components/listitems/ListItemAction.tsx @@ -23,11 +23,12 @@ import { IOSpringValues, IOStyles, hexToRgba, + useIOExperimentalDesign, useIOTheme } from "../../core"; import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; -import { AnimatedIcon, IOIcons } from "../icons"; +import { AnimatedIcon, IOIcons, Icon } from "../icons"; export type ListItemAction = WithTestID<{ label: string; @@ -46,6 +47,14 @@ const styles = StyleSheet.create({ } }); +const legacyStyles = StyleSheet.create({ + labelLegacy: { + fontSize: 18, + lineHeight: 24, + ...makeFontStyleObject("SemiBold", false, "TitilliumWeb") + } +}); + export const ListItemAction = ({ variant, label, @@ -56,11 +65,15 @@ export const ListItemAction = ({ }: ListItemAction) => { const isPressed = useSharedValue(0); + const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); - const mapBackgroundStates: Record = { - default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), - pressed: IOColors[theme["listItem-pressed"]] + const mapLegacyForegroundColor: Record< + NonNullable, + IOColors + > = { + primary: "blue", + danger: "error-850" }; const mapForegroundColor: Record< @@ -71,6 +84,42 @@ export const ListItemAction = ({ danger: IOColors[theme.errorText] }; + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyItemActionIcon = (icon: IOIcons) => ( + + ); + + const itemActionIcon = (icon: IOIcons) => ( + <> + + + ); + + const itemActionIconComponent = (icon: IOIcons) => + isExperimental ? itemActionIcon(icon) : legacyItemActionIcon(icon); + + const DSTextStyle = [styles.label, { color: mapForegroundColor[variant] }]; + + const legacyTextStyle = [ + legacyStyles.labelLegacy, + { color: IOColors[mapLegacyForegroundColor[variant]] } + ]; + + const textStyle = isExperimental ? DSTextStyle : legacyTextStyle; + + const mapBackgroundStates: Record = { + default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), + pressed: IOColors[theme["listItem-pressed"]] + }; + // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.basicButton?.pressedState; @@ -132,19 +181,11 @@ export const ListItemAction = ({ > {icon && ( - + {itemActionIconComponent(icon)} )} - - {label} - + {label} diff --git a/src/components/listitems/ListItemInfo.tsx b/src/components/listitems/ListItemInfo.tsx index f1e17a6b..85f75fb0 100644 --- a/src/components/listitems/ListItemInfo.tsx +++ b/src/components/listitems/ListItemInfo.tsx @@ -1,14 +1,17 @@ import React from "react"; -import { View } from "react-native"; +import { StyleSheet, Text, View } from "react-native"; import { + IOColors, IOListItemStyles, IOListItemVisualParams, IOStyles, + useIOExperimentalDesign, useIOTheme } from "../../core"; +import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; -import { Icon, IOIcons } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { IOIcons, Icon } from "../icons"; +import { Body, H6, LabelSmall } from "../typography"; export type ListItemInfo = WithTestID<{ label: string; @@ -22,6 +25,15 @@ export type ListItemInfo = WithTestID<{ accessibilityLabel: string; }>; +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const legacyStyles = StyleSheet.create({ + textValue: { + fontSize: 18, + lineHeight: 24, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); + export const ListItemInfo = ({ label, value, @@ -31,7 +43,46 @@ export const ListItemInfo = ({ accessibilityLabel, testID }: ListItemInfo) => { + const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyItemInfoText = ( + <> + {/* Let developer using a custom component (e.g: skeleton) */} + {typeof label === "string" ? ( + {label} + ) : ( + label + )} + {typeof value === "string" ? ( + + {value} + + ) : ( + value + )} + + ); + + const itemInfoText = ( + <> + + {label} + +
+ {value} +
+ + ); + + const itemInfoTextComponent = isExperimental + ? itemInfoText + : legacyItemInfoText; + return ( )} - - - {label} - -
- {value} -
- + {itemInfoTextComponent} {action && ( {action} diff --git a/src/components/listitems/ListItemInfoCopy.tsx b/src/components/listitems/ListItemInfoCopy.tsx index ad9e1843..395c1788 100644 --- a/src/components/listitems/ListItemInfoCopy.tsx +++ b/src/components/listitems/ListItemInfoCopy.tsx @@ -1,5 +1,11 @@ import React, { useCallback } from "react"; -import { GestureResponderEvent, Pressable, View } from "react-native"; +import { + GestureResponderEvent, + Pressable, + StyleSheet, + Text, + View +} from "react-native"; import Animated, { Extrapolate, interpolate, @@ -17,11 +23,14 @@ import { IOSpringValues, IOStyles, hexToRgba, + useIOExperimentalDesign, useIOTheme } from "../../core"; +import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { VSpacer } from "../spacer"; +import { Body, H6, LabelSmall } from "../typography"; export type ListItemInfoCopy = WithTestID<{ label: string; @@ -33,6 +42,15 @@ export type ListItemInfoCopy = WithTestID<{ accessibilityLabel: string; }>; +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const legacyStyles = StyleSheet.create({ + textValue: { + fontSize: 18, + lineHeight: 24, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); + export const ListItemInfoCopy = ({ label, value, @@ -43,9 +61,53 @@ export const ListItemInfoCopy = ({ testID }: ListItemInfoCopy) => { const isPressed = useSharedValue(0); - + const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyInfoCopyText = ( + <> + {label} + + {/* Let developer using a custom component (e.g: skeleton) */} + {typeof value === "string" ? ( + + {value} + + ) : ( + { value } + )} + + ); + + const infoCopyText = ( + <> + + {label} + + {/* Let developer using a custom component (e.g: skeleton) */} + {typeof value === "string" ? ( +
+ {value} +
+ ) : ( + { value } + )} + + ); + + const infoCopyTextComponent = isExperimental + ? infoCopyText + : legacyInfoCopyText; + + const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue"; + const mapBackgroundStates: Record = { default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), pressed: IOColors[theme["listItem-pressed"]] @@ -119,25 +181,12 @@ export const ListItemInfoCopy = ({ )} - - {label} - - {/* Let developer using a custom component (e.g: skeleton) */} - {typeof value === "string" ? ( -
- {value} -
- ) : ( - { value } - )} + {infoCopyTextComponent} diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx index d20ef0a2..955641f3 100644 --- a/src/components/listitems/ListItemNav.tsx +++ b/src/components/listitems/ListItemNav.tsx @@ -1,5 +1,11 @@ import React, { useCallback } from "react"; -import { GestureResponderEvent, Pressable, View } from "react-native"; +import { + GestureResponderEvent, + Pressable, + StyleSheet, + Text, + View +} from "react-native"; import Animated, { Extrapolate, interpolate, @@ -17,11 +23,23 @@ import { IOSpringValues, IOStyles, hexToRgba, + useIOExperimentalDesign, useIOTheme } from "../../core"; +import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { Body, H6, LabelSmall } from "../typography"; + +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const legacyStyles = StyleSheet.create({ + textValue: { + fontSize: 18, + lineHeight: 24, + color: IOColors.bluegreyDark, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); export type ListItemNav = WithTestID<{ value: string | React.ReactNode; @@ -41,14 +59,51 @@ export const ListItemNav = ({ testID }: ListItemNav) => { const isPressed = useSharedValue(0); - + const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyNavText = ( + <> + {/* Let developer using a custom component (e.g: skeleton) */} + {typeof value === "string" ? ( + {value} + ) : ( + value + )} + {description && ( + <> + {typeof description === "string" ? ( + {description} + ) : ( + description + )} + + )} + + ); + + const navText = ( + <> +
{value}
+ {description && ( + + {description} + + )} + + ); + + const navTextComponent = isExperimental + ? navText + : legacyNavText; const mapBackgroundStates: Record = { default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), pressed: IOColors[theme["listItem-pressed"]] }; + const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue"; + // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.basicButton?.pressedState; @@ -116,18 +171,11 @@ export const ListItemNav = ({ /> )} - -
{value}
- {description && ( - - {description} - - )} - + {navTextComponent} diff --git a/src/components/listitems/ListItemNavAlert.tsx b/src/components/listitems/ListItemNavAlert.tsx index ca5464dc..36960770 100644 --- a/src/components/listitems/ListItemNavAlert.tsx +++ b/src/components/listitems/ListItemNavAlert.tsx @@ -1,5 +1,11 @@ import React, { useCallback } from "react"; -import { GestureResponderEvent, Pressable, View } from "react-native"; +import { + GestureResponderEvent, + Pressable, + StyleSheet, + Text, + View +} from "react-native"; import Animated, { Extrapolate, interpolate, @@ -17,11 +23,13 @@ import { IOSpringValues, IOStyles, hexToRgba, + useIOExperimentalDesign, useIOTheme } from "../../core"; +import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { Body, H6, LabelSmall } from "../typography"; export type ListItemNavAlert = WithTestID<{ value: string; @@ -32,6 +40,15 @@ export type ListItemNavAlert = WithTestID<{ accessibilityLabel: string; }>; +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const legacyStyles = StyleSheet.create({ + textValue: { + fontSize: 18, + lineHeight: 24, + ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb") + } +}); + export const ListItemNavAlert = ({ value, description, @@ -41,9 +58,38 @@ export const ListItemNavAlert = ({ testID }: ListItemNavAlert) => { const isPressed: Animated.SharedValue = useSharedValue(0); + const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 + const legacyNavAlertText = ( + <> + + {value} + + {description && ( + + {description} + + )} + + ); + + const navAlertText = ( + <> +
{value}
+ {description && ( + + {description} + + )} + + ); + + const navAlertTextComponent = isExperimental ? navAlertText : legacyNavAlertText; + const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue"; + const mapBackgroundStates: Record = { default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), pressed: IOColors[theme["listItem-pressed"]] @@ -117,17 +163,12 @@ export const ListItemNavAlert = ({ )} -
{value}
- {description && ( - - {description} - - )} + {navAlertTextComponent} From 0aea07c036d6aac3afb9ba0ca39f8a7178e2ada2 Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Thu, 14 Sep 2023 11:32:20 +0200 Subject: [PATCH 2/3] Updating variable names --- src/components/listitems/ListItemAction.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/listitems/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx index ec53185f..f26a3c45 100644 --- a/src/components/listitems/ListItemAction.tsx +++ b/src/components/listitems/ListItemAction.tsx @@ -47,6 +47,7 @@ const styles = StyleSheet.create({ } }); +// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 const legacyStyles = StyleSheet.create({ labelLegacy: { fontSize: 18, @@ -68,6 +69,11 @@ export const ListItemAction = ({ const { isExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); + const mapBackgroundStates: Record = { + default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), + pressed: IOColors[theme["listItem-pressed"]] + }; + const mapLegacyForegroundColor: Record< NonNullable, IOColors @@ -106,19 +112,14 @@ export const ListItemAction = ({ const itemActionIconComponent = (icon: IOIcons) => isExperimental ? itemActionIcon(icon) : legacyItemActionIcon(icon); - const DSTextStyle = [styles.label, { color: mapForegroundColor[variant] }]; + const textStyle = [styles.label, { color: mapForegroundColor[variant] }]; const legacyTextStyle = [ legacyStyles.labelLegacy, { color: IOColors[mapLegacyForegroundColor[variant]] } ]; - const textStyle = isExperimental ? DSTextStyle : legacyTextStyle; - - const mapBackgroundStates: Record = { - default: hexToRgba(IOColors[theme["listItem-pressed"]], 0), - pressed: IOColors[theme["listItem-pressed"]] - }; + const textStyleComponent = isExperimental ? textStyle : legacyTextStyle; // Scaling transformation applied when the button is pressed const animationScaleValue = IOScaleValues?.basicButton?.pressedState; @@ -185,7 +186,7 @@ export const ListItemAction = ({ )} - {label} + {label} From fc9c3fc4325b29fd1f34d3dbfed0835a3f7a78fd Mon Sep 17 00:00:00 2001 From: Davide Marro Date: Thu, 14 Sep 2023 11:41:43 +0200 Subject: [PATCH 3/3] Updating tests --- .../__snapshots__/listitem.test.tsx.snap | 157 +++++++----------- 1 file changed, 60 insertions(+), 97 deletions(-) diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index 88efbadb..c7ca38d0 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -78,14 +78,14 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = ` style={ [ { - "fontFamily": "Readex Pro", - "fontSize": 16, + "fontFamily": "Titillium Web", + "fontSize": 18, "fontStyle": "normal", - "fontWeight": "400", - "lineHeight": 20, + "fontWeight": "600", + "lineHeight": 24, }, { - "color": "#0B3EE3", + "color": "#0073E6", }, ] } @@ -220,22 +220,24 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = ` } > testValue @@ -355,22 +346,24 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` } > label - + testValue @@ -426,7 +415,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` align="xMidYMid" bbHeight={24} bbWidth={24} - color={4278927075} + color={4278219750} focusable={false} height={24} importantForAccessibility="no-hide-descendants" @@ -440,7 +429,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` "borderWidth": 0, }, { - "color": "#0B3EE3", + "color": "#0073E6", }, { "flex": 0, @@ -449,7 +438,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` }, ] } - tintColor={4278927075} + tintColor={4278219750} vbHeight={24} vbWidth={24} width={24} @@ -553,31 +542,16 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` } > testValue @@ -596,7 +570,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` align="xMidYMid" bbHeight={24} bbWidth={24} - color={4278927075} + color={4278219750} focusable={false} height={24} importantForAccessibility="no-hide-descendants" @@ -610,7 +584,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` "borderWidth": 0, }, { - "color": "#0B3EE3", + "color": "#0073E6", }, { "flex": 0, @@ -619,7 +593,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` }, ] } - tintColor={4278927075} + tintColor={4278219750} vbHeight={24} vbWidth={24} width={24} @@ -785,31 +759,20 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` } > testValue @@ -828,7 +791,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` align="xMidYMid" bbHeight={24} bbWidth={24} - color={4278927075} + color={4278219750} focusable={false} height={24} importantForAccessibility="no-hide-descendants" @@ -842,7 +805,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` "borderWidth": 0, }, { - "color": "#0B3EE3", + "color": "#0073E6", }, { "flex": 0, @@ -851,7 +814,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` }, ] } - tintColor={4278927075} + tintColor={4278219750} vbHeight={24} vbWidth={24} width={24}