@pagopa/io-app-design-system 4.3.0 → 4.4.0

package/src/components/layout/HeaderSecondLevel.tsx

@@ -24,7 +24,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   IOColors,
   IOSpringValues,
-  IOStyles,
   IOVisualCostants,
   alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
@@ -37,6 +36,7 @@ import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
+import { HStack } from "../stack";
 import { IOText } from "../typography";
 import { HeaderActionProps } from "./common";
 
@@ -310,28 +310,19 @@ export const HeaderSecondLevel = ({
             {title}
           </AnimatedIOText>
         </View>
-        <View style={[IOStyles.row, { flexShrink: 0 }]}>
+        <HStack allowScaleSpacing space={16} style={{ flexShrink: 0 }}>
           {type === "threeActions" && (
-            <>
-              <IconButton {...thirdAction} color={iconButtonColor} />
-              {/* Same as above */}
-              <HSpacer size={16} />
-            </>
+            <IconButton {...thirdAction} color={iconButtonColor} />
           )}
           {(type === "twoActions" || type === "threeActions") && (
-            <>
-              <IconButton {...secondAction} color={iconButtonColor} />
-              {/* Ideally, with the "gap" flex property,
-              we can get rid of these ugly constructs */}
-              <HSpacer size={16} />
-            </>
+            <IconButton {...secondAction} color={iconButtonColor} />
           )}
           {type !== "base" ? (
             <IconButton {...firstAction} color={iconButtonColor} />
           ) : (
             <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}
-        </View>
+        </HStack>
       </Animated.View>
     </Animated.View>
   );

package/src/components/listitems/ListItemAction.tsx

@@ -8,6 +8,7 @@ import {
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons } from "../icons";
 import { ButtonText } from "../typography/ButtonText";
@@ -37,6 +38,8 @@ export const ListItemAction = ({
 
   const theme = useIOTheme();
 
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
     [label, accessibilityLabel]
@@ -68,16 +71,24 @@ export const ListItemAction = ({
         accessibilityElementsHidden
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
           {icon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <AnimatedIcon
-                name={icon}
-                color={IOColors[mapForegroundColor[variant]]}
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
+            <AnimatedIcon
+              allowFontScaling
+              name={icon}
+              color={IOColors[mapForegroundColor[variant]]}
+              size={IOListItemVisualParams.iconSize}
+            />
           )}
           <View style={{ flexGrow: 1, flexShrink: 1 }}>
             <ButtonText color={mapForegroundColor[variant]}>{label}</ButtonText>

package/src/components/listitems/ListItemAmount.tsx

@@ -7,9 +7,9 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { HSpacer } from "../spacer";
 import { H3, H6 } from "../typography";
 
 type ValueProps = ComponentProps<typeof H3>;
@@ -42,6 +42,8 @@ export const ListItemAmount = ({
   testID
 }: ListItemAmount) => {
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
@@ -65,18 +67,21 @@ export const ListItemAmount = ({
       accessible
       accessibilityLabel={listItemAccessibilityLabel}
     >
-      <View style={IOListItemStyles.listItemInner}>
-        {iconName && (
-          <View style={{ marginRight: iconMargin }}>
-            <Icon
-              name={iconName}
-              color={iconColor ?? theme["icon-decorative"]}
-              size={IOListItemVisualParams.iconSize}
-            />
-          </View>
+      <View
+        style={[
+          IOListItemStyles.listItemInner,
+          { columnGap: iconMargin * dynamicFontScale * spacingScaleMultiplier }
+        ]}
+      >
+        {iconName && !hugeFontEnabled && (
+          <Icon
+            allowFontScaling
+            name={iconName}
+            color={iconColor ?? theme["icon-decorative"]}
+            size={IOListItemVisualParams.iconSize}
+          />
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        <HSpacer size={4} />
         <H3
           {...valueElementProps}
           color={theme["textBody-default"]}

package/src/components/listitems/ListItemCheckbox.tsx

@@ -6,14 +6,16 @@ import Animated from "react-native-reanimated";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
+  IOSelectionTickVisualParams,
   IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 type Props = {
   value: string;
@@ -48,6 +50,9 @@ export const ListItemCheckbox = ({
   disabled,
   onValueChange
 }: ListItemCheckboxProps) => {
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
@@ -98,19 +103,25 @@ export const ListItemCheckbox = ({
       >
         <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
-            <View style={[IOStyles.row, { flexShrink: 1 }]}>
-              {icon && (
-                <View
-                  style={{
-                    marginRight: IOSelectionListItemVisualParams.iconMargin
-                  }}
-                >
-                  <Icon
-                    name={icon}
-                    color="grey-300"
-                    size={IOSelectionListItemVisualParams.iconSize}
-                  />
-                </View>
+            <View
+              style={[
+                IOStyles.row,
+                {
+                  flexShrink: 1,
+                  columnGap:
+                    IOSelectionListItemVisualParams.iconMargin *
+                    dynamicFontScale *
+                    spacingScaleMultiplier
+                }
+              ]}
+            >
+              {icon && !hugeFontEnabled && (
+                <Icon
+                  allowFontScaling
+                  name={icon}
+                  color="grey-300"
+                  size={IOSelectionListItemVisualParams.iconSize}
+                />
               )}
               <H6 color={theme["textBody-default"]} style={{ flexShrink: 1 }}>
                 {value}
@@ -122,7 +133,10 @@ export const ListItemCheckbox = ({
               accessibilityElementsHidden
               importantForAccessibility="no-hide-descendants"
             >
-              <AnimatedCheckbox checked={selected ?? toggleValue} />
+              <AnimatedCheckbox
+                size={IOSelectionTickVisualParams.size * dynamicFontScale}
+                checked={selected ?? toggleValue}
+              />
             </View>
           </View>
           {description && (

package/src/components/listitems/ListItemHeader.tsx

@@ -7,6 +7,7 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
@@ -61,6 +62,9 @@ export const ListItemHeader = ({
 }: ListItemHeader) => {
   const theme = useIOTheme();
 
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
     [label, accessibilityLabel]
@@ -129,9 +133,15 @@ export const ListItemHeader = ({
         style={IOListItemStyles.listItemInner}
         importantForAccessibility={endElement ? "auto" : "no-hide-descendants"}
       >
-        {iconName && (
-          <View style={{ marginRight: iconMargin }}>
+        {iconName && !hugeFontEnabled && (
+          <View
+            style={{
+              marginRight:
+                iconMargin * dynamicFontScale * spacingScaleMultiplier
+            }}
+          >
             <Icon
+              allowFontScaling
               name={iconName}
               color={iconColor ?? theme["icon-decorative"]}
               size={IOListItemVisualParams.iconSize}

package/src/components/listitems/ListItemInfo.tsx

@@ -6,6 +6,7 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
@@ -68,6 +69,9 @@ export const ListItemInfo = ({
   testID
 }: ListItemInfo) => {
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
     [value]
@@ -140,30 +144,33 @@ export const ListItemInfo = ({
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityRole={accessibilityRole}
     >
-      <View style={IOListItemStyles.listItemInner}>
-        {icon && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <Icon
-              name={icon}
-              color="grey-450"
-              size={IOListItemVisualParams.iconSize}
-            />
-          </View>
+      <View
+        style={[
+          IOListItemStyles.listItemInner,
+          {
+            columnGap:
+              IOListItemVisualParams.iconMargin *
+              dynamicFontScale *
+              spacingScaleMultiplier
+          }
+        ]}
+      >
+        {icon && !hugeFontEnabled && (
+          <Icon
+            allowFontScaling
+            name={icon}
+            color="grey-450"
+            size={IOListItemVisualParams.iconSize}
+          />
         )}
         {paymentLogoIcon && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <LogoPaymentWithFallback
-              brand={paymentLogoIcon}
-              size={PAYMENT_LOGO_SIZE}
-            />
-          </View>
+          <LogoPaymentWithFallback
+            brand={paymentLogoIcon}
+            size={PAYMENT_LOGO_SIZE}
+          />
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        {endElement && (
-          <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
-            {listItemInfoAction()}
-          </View>
-        )}
+        {endElement && <View>{listItemInfoAction()}</View>}
       </View>
     </View>
   );

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -8,6 +8,7 @@ import {
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { BodySmall, H6 } from "../typography";
@@ -38,6 +39,9 @@ export const ListItemInfoCopy = ({
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
 
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
     [value]
@@ -87,25 +91,32 @@ export const ListItemInfoCopy = ({
         style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
-          {icon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <Icon
-                name={icon}
-                color="grey-450"
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
-          )}
-          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
-          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+          {icon && !hugeFontEnabled && (
             <Icon
-              name="copy"
-              color={foregroundColor}
-              size={IOListItemVisualParams.chevronSize}
+              allowFontScaling
+              name={icon}
+              color="grey-450"
+              size={IOListItemVisualParams.iconSize}
             />
-          </View>
+          )}
+          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
+          <Icon
+            allowFontScaling
+            name="copy"
+            color={foregroundColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
         </Animated.View>
       </Animated.View>
     </Pressable>

package/src/components/listitems/ListItemNav.tsx

@@ -1,11 +1,5 @@
-import React, { ComponentProps, ReactNode } from "react";
-import {
-  GestureResponderEvent,
-  Image,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
+import React, { ComponentProps } from "react";
+import { GestureResponderEvent, Image, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import {
   IOColors,
@@ -16,13 +10,14 @@ import {
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
-import { Caption, H6, BodySmall } from "../typography";
+import { BodySmall, Caption, H6 } from "../typography";
 
 type ListItemTopElementProps =
   | {
@@ -80,13 +75,6 @@ export type ListItemNavGraphicProps =
 
 export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
 
-const styles = StyleSheet.create({
-  paymentLogoSize: {
-    width: IOSelectionListItemVisualParams.iconSize,
-    height: IOSelectionListItemVisualParams.iconSize
-  }
-});
-
 export const ListItemNav = ({
   value,
   description,
@@ -107,11 +95,8 @@ export const ListItemNav = ({
     useListItemAnimation();
   const theme = useIOTheme();
 
-  const withMargin = (GraphicalAsset: ReactNode) => (
-    <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-      {GraphicalAsset}
-    </View>
-  );
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
   const listItemNavContent = (
     <>
@@ -128,7 +113,12 @@ export const ListItemNav = ({
           {topElement.dateValue && (
             <>
               <View style={{ alignSelf: "flex-start", flexDirection: "row" }}>
-                <Icon name="calendar" size={16} color="grey-300" />
+                <Icon
+                  allowFontScaling
+                  name="calendar"
+                  size={16}
+                  color="grey-300"
+                />
                 <HSpacer size={4} />
                 <Caption color={theme["textBody-tertiary"]}>
                   {topElement.dateValue}
@@ -186,35 +176,49 @@ export const ListItemNav = ({
         style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
           {/* Possibile graphical assets
           - Icon
           - Image URL (for payment logos)
           - Avatar
           */}
-          {icon &&
-            withMargin(
-              <Icon
-                name={icon}
-                color={iconColor}
-                size={IOListItemVisualParams.iconSize}
-              />
-            )}
-          {paymentLogoUri &&
-            withMargin(
-              <Image
-                accessibilityIgnoresInvertColors
-                source={{ uri: paymentLogoUri }}
-                style={styles.paymentLogoSize}
-              />
-            )}
-          {avatar && withMargin(<Avatar size="small" {...avatar} />)}
+          {icon && !hugeFontEnabled && (
+            <Icon
+              allowFontScaling
+              name={icon}
+              color={iconColor}
+              size={IOListItemVisualParams.iconSize}
+            />
+          )}
+          {paymentLogoUri && (
+            <Image
+              accessibilityIgnoresInvertColors
+              source={{ uri: paymentLogoUri }}
+              style={{
+                width:
+                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
+                height:
+                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale
+              }}
+            />
+          )}
+          {avatar && <Avatar size="small" {...avatar} />}
 
           <View style={IOStyles.flex}>{listItemNavContent}</View>
           {loading && <LoadingSpinner color={interactiveColor} />}
           {!loading && !hideChevron && (
             <Icon
+              allowFontScaling
               name="chevronRightListItem"
               color={interactiveColor}
               size={IOListItemVisualParams.chevronSize}

package/src/components/listitems/ListItemNavAlert.tsx

@@ -5,12 +5,14 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
   value: string | React.ReactNode;
@@ -35,6 +37,8 @@ export const ListItemNavAlert = ({
   const theme = useIOTheme();
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+  const { isExperimental } = useIOExperimentalDesign();
 
   const componentValueToAccessibility = typeof value === "string" ? value : "";
   const componentDescriptionToAccessibility =
@@ -67,6 +71,8 @@ export const ListItemNavAlert = ({
     </>
   );
 
+  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+
   return (
     <Pressable
       onPress={onPress}
@@ -85,25 +91,33 @@ export const ListItemNavAlert = ({
         accessibilityElementsHidden
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
           {!withoutIcon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <Icon
-                name="errorFilled"
-                color={theme.errorIcon}
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
-          )}
-          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
-          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
-              name="chevronRightListItem"
-              color={theme["interactiveElem-default"]}
-              size={IOListItemVisualParams.chevronSize}
+              allowFontScaling
+              name="errorFilled"
+              color={theme.errorIcon}
+              size={IOListItemVisualParams.iconSize}
             />
-          </View>
+          )}
+          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
+
+          <Icon
+            allowFontScaling
+            name="chevronRightListItem"
+            color={iconColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
         </Animated.View>
       </Animated.View>
     </Pressable>