@pagopa/io-app-design-system 5.3.9 → 5.4.1

package/src/components/icons/types.ts

@@ -1,8 +1,9 @@
-import { StyleProp } from "react-native";
+import { ColorValue, StyleProp } from "react-native";
 
 export type SVGIconProps = {
   size: number | "100%";
-  style: StyleProp<any>;
+  style?: StyleProp<any>;
+  color: ColorValue;
   accessible: boolean;
   accessibilityElementsHidden: boolean;
   accessibilityLabel: string;

package/src/components/layout/FooterActions.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps, Fragment, PropsWithChildren, useState } from "react";
+import { Fragment, PropsWithChildren, useState } from "react";
 import {
   ColorValue,
   LayoutChangeEvent,
@@ -20,29 +20,39 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { ButtonLink, ButtonOutline, ButtonSolid } from "../buttons";
+import {
+  IOButton,
+  IOButtonBlockSpecificProps,
+  IOButtonLinkSpecificProps
+} from "../buttons";
 import { VSpacer } from "../spacer";
 import { useBottomMargins } from "./hooks/useBottomMargins";
 
+type IOButtonBlockProps = Omit<
+  IOButtonBlockSpecificProps,
+  "variant" | "fullWidth"
+>;
+type IOButtonLinkProps = Omit<IOButtonLinkSpecificProps, "variant">;
+
 type FooterSingleButton = {
   type: "SingleButton";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  primary: IOButtonBlockProps;
   secondary?: never;
   tertiary?: never;
 };
 
 type FooterTwoButtons = {
   type: "TwoButtons";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
-  secondary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  primary: IOButtonBlockProps;
+  secondary: IOButtonLinkProps;
   tertiary?: never;
 };
 
 type FooterThreeButtons = {
   type: "ThreeButtons";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
-  secondary: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth" | "color">;
-  tertiary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  primary: IOButtonBlockProps;
+  secondary: IOButtonBlockProps;
+  tertiary: IOButtonLinkProps;
 };
 
 export type FooterActionsMeasurements = {
@@ -86,9 +96,9 @@ type FooterActionsProps = WithTestID<
   }>
 >;
 
-/* Margin between ButtonSolid and ButtonOutline */
+/* Margin between `solid` and `variant` variant */
 const spaceBetweenActions: IOSpacer = 16;
-/* Margin between ButtonSolid and ButtonLink */
+/* Margin between `solid` and `link` variant */
 const spaceBetweenActionAndLink: IOSpacer = 16;
 
 const styles = StyleSheet.create({
@@ -227,11 +237,13 @@ const renderActions = (
   } = actions;
   return (
     <Fragment>
-      {primaryAction && <ButtonSolid fullWidth {...primaryAction} />}
+      {primaryAction && (
+        <IOButton variant="solid" fullWidth {...primaryAction} />
+      )}
       {type === "TwoButtons" && secondaryAction && (
         <View style={{ alignSelf: "center", marginBottom: extraBottomMargin }}>
           <VSpacer size={spaceBetweenActionAndLink} />
-          <ButtonLink color="primary" {...secondaryAction} />
+          <IOButton variant="link" {...secondaryAction} />
         </View>
       )}
       {type === "ThreeButtons" && (
@@ -239,7 +251,7 @@ const renderActions = (
           {secondaryAction && (
             <>
               <VSpacer size={spaceBetweenActions} />
-              <ButtonOutline fullWidth color="primary" {...secondaryAction} />
+              <IOButton variant="outline" fullWidth {...secondaryAction} />
             </>
           )}
           {tertiaryAction && (
@@ -247,7 +259,7 @@ const renderActions = (
               style={{ alignSelf: "center", marginBottom: extraBottomMargin }}
             >
               <VSpacer size={spaceBetweenActionAndLink} />
-              <ButtonLink color="primary" {...tertiaryAction} />
+              <IOButton variant="link" {...tertiaryAction} />
             </View>
           )}
         </>

package/src/components/layout/FooterActionsInline.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
 import {
   IOColors,
@@ -11,10 +11,14 @@ import {
   useIOThemeContext
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { ButtonOutline, ButtonSolid } from "../buttons";
-import { HSpacer } from "../spacer";
+import { IOButton, IOButtonBlockSpecificProps } from "../buttons";
 import { useBottomMargins } from "./hooks/useBottomMargins";
 
+type IOButtonBlockProps = Omit<
+  IOButtonBlockSpecificProps,
+  "variant" | "fullWidth"
+>;
+
 export type FooterActionsInlineMeasurements = {
   /* Height of the safe bottom area. It includes:
      - Margin between screen content
@@ -29,8 +33,8 @@ export type FooterActionsInlineMeasurements = {
 
 type FooterActionsInline = WithTestID<
   PropsWithChildren<{
-    startAction: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth">;
-    endAction: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+    startAction: IOButtonBlockProps;
+    endAction: IOButtonBlockProps;
     onMeasure?: (measurements: FooterActionsInlineMeasurements) => void;
     /* Don't include safe area insets */
     excludeSafeAreaMargins?: boolean;
@@ -39,9 +43,6 @@ type FooterActionsInline = WithTestID<
   }>
 >;
 
-/* Margin between ButtonSolid and ButtonOutline */
-const spaceBetweenActions: IOSpacer = 16;
-
 const styles = StyleSheet.create({
   buttonContainer: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -76,6 +77,8 @@ export const FooterActionsInline = ({
 
   const { bottomMargin } = useBottomMargins(false, excludeSafeAreaMargins);
 
+  /* Margin between `solid` and `outline` variant */
+  const spaceBetweenActions: IOSpacer = 16;
   /* Top padding applied above the actions */
   const topSpacingValue: IOSpacingScale = 16;
   const topSpacing = fixed ? topSpacingValue : 0;
@@ -122,13 +125,17 @@ export const FooterActionsInline = ({
         onLayout={getActionBlockMeasurements}
         pointerEvents="box-none"
       >
-        <View style={{ flexDirection: "row" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            gap: spaceBetweenActions
+          }}
+        >
           <View style={styles.buttonWrapper}>
-            <ButtonOutline fullWidth {...startAction} />
+            <IOButton variant="outline" fullWidth {...startAction} />
           </View>
-          <HSpacer size={spaceBetweenActions} />
           <View style={styles.buttonWrapper}>
-            <ButtonSolid fullWidth {...endAction} />
+            <IOButton variant="solid" fullWidth {...endAction} />
           </View>
         </View>
       </View>

package/src/components/layout/GradientBottomActions.tsx

@@ -2,23 +2,24 @@ import * as React from "react";
 import { Easing, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { easeGradient } from "react-native-easing-gradient";
 import LinearGradient from "react-native-linear-gradient";
-import Animated from "react-native-reanimated";
+import Animated, { AnimatedStyle } from "react-native-reanimated";
 import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
 import { WithTestID } from "../../utils/types";
-import {
-  ButtonLink,
-  ButtonLinkProps,
-  ButtonSolid,
-  ButtonSolidProps
-} from "../buttons";
+import { IOButton, IOButtonProps } from "../buttons";
 import { VSpacer } from "../spacer";
 
+type PrimaryActionProps = Extract<
+  IOButtonProps,
+  { variant?: "solid" | "outline" }
+>;
+type SecondaryActionProps = Extract<IOButtonProps, { variant?: "link" }>;
+
 export type GradientBottomActions = WithTestID<{
-  transitionAnimStyle: Animated.AnimateStyle<StyleProp<ViewStyle>>;
+  transitionAnimStyle: AnimatedStyle<StyleProp<ViewStyle>>;
   dimensions: GradientBottomActionsDimensions;
-  // Accepted components: ButtonSolid for the primaryAction, ButtonLink for the secondaryAction
-  primaryActionProps?: Omit<ButtonSolidProps, "fullWidth">;
-  secondaryActionProps?: ButtonLinkProps;
+  // Button actions
+  primaryActionProps?: PrimaryActionProps;
+  secondaryActionProps?: SecondaryActionProps;
   // Debug mode
   debugMode?: boolean;
 }>;
@@ -68,8 +69,8 @@ const styles = StyleSheet.create({
  * @see IOScrollView
  */
 export const GradientBottomActions = ({
-  primaryActionProps: primaryAction,
-  secondaryActionProps: secondaryAction,
+  primaryActionProps,
+  secondaryActionProps,
   dimensions,
   transitionAnimStyle,
   debugMode,
@@ -122,11 +123,9 @@ export const GradientBottomActions = ({
       ]}
     />
     <View style={styles.buttonContainer} pointerEvents="box-none">
-      {primaryAction && (
-        <ButtonSolid fullWidth {...primaryAction}></ButtonSolid>
-      )}
+      {primaryActionProps && <IOButton {...primaryActionProps} fullWidth />}
 
-      {secondaryAction && (
+      {secondaryActionProps && (
         <View
           style={{
             alignSelf: "center",
@@ -134,7 +133,7 @@ export const GradientBottomActions = ({
           }}
         >
           <VSpacer size={dimensions.spaceBetweenActions} />
-          {<ButtonLink {...secondaryAction}></ButtonLink>}
+          <IOButton {...secondaryActionProps} />
         </View>
       )}
     </View>

package/src/components/layout/GradientScrollView.tsx

@@ -21,7 +21,8 @@ export type GradientScrollView = WithTestID<{
   children: React.ReactNode;
   excludeSafeAreaMargins?: boolean;
   debugMode?: boolean;
-  // Accepted components: ButtonSolid, ButtonLink
+  // Accepted components: `solid` variant for the primaryAction,
+  // `link` variant for the secondaryAction.
   // Don't use any components other than this, please.
   primaryActionProps: GradientBottomActions["primaryActionProps"];
   secondaryActionProps?: GradientBottomActions["secondaryActionProps"];

package/src/components/layout/ModalBSHeader.tsx

@@ -6,7 +6,7 @@ import {
   View,
   findNodeHandle
 } from "react-native";
-import { IOColors, IOStyles, IOVisualCostants } from "../../core";
+import { IOColors, IOVisualCostants } from "../../core";
 import { IconButton } from "../buttons";
 import { H4 } from "../typography";
 
@@ -56,7 +56,7 @@ export const ModalBSHeader = ({
         title
       ) : (
         <View
-          style={IOStyles.flex}
+          style={{ flex: 1 }}
           accessible={true}
           accessibilityRole={"header"}
           accessibilityLabel={typeof title === "string" ? title : undefined}

package/src/components/listitems/ListItemAmount.tsx

@@ -4,7 +4,6 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOSpacingScale,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
@@ -81,7 +80,7 @@ export const ListItemAmount = ({
             size={IOListItemVisualParams.iconSize}
           />
         )}
-        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
         <H3
           {...valueElementProps}
           color={theme["textBody-default"]}

package/src/components/listitems/ListItemCheckbox.tsx

@@ -7,7 +7,6 @@ import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   IOSelectionTickVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -104,16 +103,14 @@ export const ListItemCheckbox = ({
         <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
             <View
-              style={[
-                IOStyles.row,
-                {
-                  flexShrink: 1,
-                  columnGap:
-                    IOSelectionListItemVisualParams.iconMargin *
-                    dynamicFontScale *
-                    spacingScaleMultiplier
-                }
-              ]}
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                columnGap:
+                  IOSelectionListItemVisualParams.iconMargin *
+                  dynamicFontScale *
+                  spacingScaleMultiplier
+              }}
             >
               {icon && !hugeFontEnabled && (
                 <Icon

package/src/components/listitems/ListItemHeader.tsx

@@ -5,7 +5,6 @@ import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacingScale,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -14,8 +13,8 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
 import { IOIcons, Icon } from "../icons";
-import { BodySmall, H6 } from "../typography";
 import { VSpacer } from "../spacer";
+import { BodySmall, H6 } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -121,7 +120,7 @@ export const ListItemHeader = ({
             />
           </View>
         )}
-        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
         {endElement && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
             {listItemAction()}

package/src/components/listitems/ListItemInfo.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -175,7 +174,7 @@ export const ListItemInfo = ({
           size={PAYMENT_LOGO_SIZE}
         />
       )}
-      <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+      <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
       {endElement && <View>{listItemInfoAction()}</View>}
     </>
   );

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -110,7 +109,7 @@ export const ListItemInfoCopy = ({
               size={IOListItemVisualParams.iconSize}
             />
           )}
-          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
+          <View style={{ flex: 1 }}>{listItemInfoCopyContent}</View>
           <Icon
             allowFontScaling
             name="copy"

package/src/components/listitems/ListItemNav.tsx

@@ -229,7 +229,7 @@ export const ListItemNav = ({
           <View style={{ flexGrow: 1, flexShrink: 1 }}>
             {listItemNavContent}
           </View>
-          {loading && <LoadingSpinner color={interactiveColor} />}
+          {loading && <LoadingSpinner color={IOColors[interactiveColor]} />}
           {!loading && !hideChevron && (
             <Icon
               allowFontScaling

package/src/components/listitems/ListItemNavAlert.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -108,7 +107,7 @@ export const ListItemNavAlert = ({
               size={IOListItemVisualParams.iconSize}
             />
           )}
-          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
+          <View style={{ flex: 1 }}>{listItemNavAlertContent}</View>
           <Icon
             allowFontScaling
             name="chevronRightListItem"

package/src/components/listitems/ListItemRadio.tsx

@@ -7,7 +7,6 @@ import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   IOSelectionTickVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -133,13 +132,14 @@ export const ListItemRadio = ({
     >
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
-          style={[
-            IOStyles.flex,
-            IOStyles.rowSpaceBetween,
-            IOStyles.alignCenter
-          ]}
+          style={{
+            flex: 1,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }}
         >
-          <View style={[IOStyles.row, IOStyles.alignCenter]}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
             {loadingProps?.skeletonIcon && <SkeletonIcon />}
             <IOSkeleton shape="rectangle" width={180} height={16} radius={8} />
           </View>