@pagopa/io-app-design-system 3.0.1 → 4.0.0

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -5,7 +5,7 @@ import { IOColors, useIOTheme } from "../../core";
 import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import { PressableListItemBase } from "./PressableListItemsBase";
 
 export type ListItemRadioWithAmountProps = {
@@ -55,22 +55,22 @@ export const ListItemRadioWithAmount = ({
       }}
     >
       <View style={{ flexShrink: 1 }}>
-        <LabelSmall
+        <BodySmall
           weight="Semibold"
           numberOfLines={1}
           color={theme["textBody-default"]}
         >
           {label}
-        </LabelSmall>
+        </BodySmall>
         {isSuggested && (
           <>
             <VSpacer size={4} />
             <View style={styles.rowCenter}>
               <Icon name="sparkles" size={16} color={suggestColor} />
               <HSpacer size={4} />
-              <LabelSmall weight="Regular" color={suggestColor}>
+              <BodySmall weight="Regular" color={suggestColor}>
                 {suggestReason}
-              </LabelSmall>
+              </BodySmall>
             </View>
           </>
         )}

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,18 +1,18 @@
 import React, { useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
-import { WithTestID } from "../../utils/types";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   useIOTheme
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
-import { H6, LabelMini, LabelSmall } from "../typography";
+import { BodySmall, H6, LabelMini } from "../typography";
 
 type PartialProps = WithTestID<{
   label: string;
@@ -178,9 +178,9 @@ export const ListItemSwitch = React.memo(
         {description && (
           <>
             <VSpacer size={IOSelectionListItemVisualParams.descriptionMargin} />
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           </>
         )}
         {action && (

package/src/components/listitems/ListItemTransaction.tsx

@@ -21,7 +21,7 @@ import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
 import { HStack } from "../stack";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
@@ -146,16 +146,16 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={{ flexShrink: 1 }}>
-          <LabelSmall
+          <BodySmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
             weight="Semibold"
           >
             {title}
-          </LabelSmall>
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          </BodySmall>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
-          </LabelSmall>
+          </BodySmall>
         </View>
       </HStack>
       <HStack style={{ alignItems: "center" }}>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -262,7 +262,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -384,7 +384,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -551,7 +551,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -780,7 +780,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1082,7 +1082,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1366,7 +1366,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1774,7 +1774,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "lineHeight": 20,
               },
             ]

package/src/components/modules/ModuleAttachment.tsx

@@ -7,7 +7,7 @@ import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack, VStack } from "../stack";
-import { Label } from "../typography";
+import { Body } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -66,13 +66,13 @@ const ModuleAttachmentContent = ({
         space={4}
         style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }}
       >
-        <Label
+        <Body
           weight="Semibold"
           numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
-        </Label>
+        </Body>
         <Badge text={format.toUpperCase()} variant="default" />
       </VStack>
       <IconOrActivityIndicatorComponent />

package/src/components/modules/ModuleCheckout.tsx

@@ -15,7 +15,7 @@ import {
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HStack, VStack } from "../stack";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -70,9 +70,9 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{title}</H6>
         {subtitle && (
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
-          </LabelSmall>
+          </BodySmall>
         )}
       </View>
     </HStack>

package/src/components/modules/ModuleCredential.tsx

@@ -20,7 +20,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack } from "../stack/Stack";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -89,7 +89,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
         {/* Graphical assets */}
         {iconComponent ?? imageComponent}
 
-        <LabelSmall
+        <BodySmall
           color={theme["interactiveElem-default"]}
           weight="Semibold"
           numberOfLines={2}
@@ -97,7 +97,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           style={{ flexShrink: 1 }}
         >
           {label}
-        </LabelSmall>
+        </BodySmall>
       </HStack>
       <View style={IOStyles.row}>
         {badge ? (

package/src/components/modules/ModuleNavigation.tsx

@@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { Chip, LabelSmall } from "../typography";
+import { LabelMini, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -79,7 +79,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
           {iconComponent ?? imageComponent}
 
           <View style={{ flexShrink: 1 }}>
-            <LabelSmall
+            <BodySmall
               color={theme["interactiveElem-default"]}
               weight="Semibold"
               numberOfLines={2}
@@ -87,9 +87,11 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
               style={{ flexShrink: 1 }}
             >
               {title}
-            </LabelSmall>
+            </BodySmall>
             {subtitle && (
-              <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>
+              <LabelMini weight="Regular" color={theme["textBody-tertiary"]}>
+                {subtitle}
+              </LabelMini>
             )}
           </View>
         </HStack>

package/src/components/modules/ModulePaymentNotice.tsx

@@ -6,7 +6,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { H6, Label, LabelSmall } from "../typography";
+import { Body, H6, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -93,22 +93,22 @@ const ModulePaymentNoticeContent = ({
     <HStack space={IOListItemVisualParams.iconMargin as IOSpacer}>
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         {title && (
-          <LabelSmall
+          <BodySmall
             numberOfLines={1}
             weight="Regular"
             color={theme["textBody-tertiary"]}
           >
             {title}
-          </LabelSmall>
+          </BodySmall>
         )}
         {subtitle && (
-          <Label
+          <Body
             color={theme["interactiveElem-default"]}
             numberOfLines={2}
             weight="Semibold"
           >
             {subtitle}
-          </Label>
+          </Body>
         )}
       </View>
       <View style={styles.endBlock}>

package/src/components/modules/ModuleSummary.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { useIOTheme } from "../../core";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -28,9 +28,9 @@ export const ModuleSummary = ({
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{label}</H6>
         {description && (
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {description}
-          </LabelSmall>
+          </BodySmall>
         )}
       </View>
       <View style={{ marginLeft: 8 }}>

package/src/components/otpInput/BoxedInput.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { IOColors } from "../../core";
-import { BaseTypography, H6 } from "../typography";
+import { H6, IOText } from "../typography";
 
 type Props = {
   status: "default" | "focus" | "error";
@@ -36,15 +36,16 @@ const styles = StyleSheet.create({
 
 // FIXME Replace this component with H3 once the legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const SecretValue = () => (
-  <BaseTypography
+  <IOText
     font="DMMono"
     weight="Semibold"
-    color="bluegreyDark"
-    fontStyle={{ fontSize: 22, lineHeight: 33 }}
+    color="grey-850"
+    size={22}
+    lineHeight={33}
     accessible={false}
   >
     {"•"}
-  </BaseTypography>
+  </IOText>
 );
 
 export const BoxedInput = ({ status, value, secret }: Props) => {

package/src/components/otpInput/OTPInput.tsx

@@ -1,11 +1,18 @@
 import * as React from "react";
-import { AccessibilityInfo, NativeSyntheticEvent, Pressable, TextInput, TextInputKeyPressEventData, View } from "react-native";
+import {
+  AccessibilityInfo,
+  NativeSyntheticEvent,
+  Pressable,
+  TextInput,
+  TextInputKeyPressEventData,
+  View
+} from "react-native";
 import Animated from "react-native-reanimated";
 import { IOStyles } from "../../core/IOStyles";
-import { LabelSmall } from "../typography";
 import { triggerHaptic } from "../../functions";
-import { VSpacer } from "../spacer";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
+import { VSpacer } from "../spacer";
+import { BodySmall } from "../typography";
 import { BoxedInput } from "./BoxedInput";
 
 type Props = {
@@ -95,11 +102,15 @@ export const OTPInput = React.forwardRef<View, Props>(
       handleValidate(value);
     };
 
-    const handleKeyPress = ({ nativeEvent }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    const handleKeyPress = ({
+      nativeEvent
+    }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       switch (nativeEvent.key) {
-        case 'Backspace':
+        case "Backspace":
           if (deleteButtonAccessibilityLabel && value.length > 0) {
-            AccessibilityInfo.announceForAccessibility(deleteButtonAccessibilityLabel);
+            AccessibilityInfo.announceForAccessibility(
+              deleteButtonAccessibilityLabel
+            );
           }
           break;
         default:
@@ -156,9 +167,13 @@ export const OTPInput = React.forwardRef<View, Props>(
         </Pressable>
         <VSpacer size={4} />
         {hasError && errorMessage && (
-          <LabelSmall color="error-850" style={{ textAlign: "center" }}>
+          <BodySmall
+            weight="Semibold"
+            color="error-850"
+            style={{ textAlign: "center" }}
+          >
             {errorMessage}
-          </LabelSmall>
+          </BodySmall>
         )}
       </Animated.View>
     );

package/src/components/tabs/TabItem.tsx

@@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 
 type ColorMode = "light" | "dark";
 
@@ -257,9 +257,9 @@ const TabItem = ({
             <HSpacer size={4} />
           </>
         )}
-        <LabelSmall weight="Semibold" color={foregroundColor}>
+        <BodySmall weight="Semibold" color={foregroundColor}>
           {label}
-        </LabelSmall>
+        </BodySmall>
       </Animated.View>
     </Pressable>
   );

package/src/components/textInput/TextInputBase.tsx

@@ -31,7 +31,7 @@ import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
@@ -186,15 +186,15 @@ const HelperRow = ({
       }
     >
       {bottomMessage && (
-        <LabelSmall weight="Regular" color={bottomMessageColor}>
+        <BodySmall weight="Regular" color={bottomMessageColor}>
           {bottomMessage}
-        </LabelSmall>
+        </BodySmall>
       )}
       {counterLimit && (
-        <LabelSmall
+        <BodySmall
           weight="Regular"
           color="grey-700"
-        >{`${valueCount} / ${counterLimit}`}</LabelSmall>
+        >{`${valueCount} / ${counterLimit}`}</BodySmall>
       )}
     </View>
   );

package/src/components/tooltip/Arrows.tsx

@@ -0,0 +1,36 @@
+import Svg, { Path } from 'react-native-svg';
+import React from 'react';
+import { IOColors } from '../../core';
+
+export const LeftArrow = ({ color = IOColors.white }: { color?: string }) => (
+  <Svg fill="none" >
+    <Path
+      d="M12.6955 15.2C14.8289 13.6 14.8289 10.4 12.6955 8.8L0.962204 0V24L12.6955 15.2Z"
+      fill={color}
+    />
+  </Svg>
+);
+export const RightArrow = ({ color = IOColors.white }: { color?: string }) => (
+  <Svg fill={color}>
+    <Path
+      d="M2.30448 15.2031C0.171145 13.6031 0.171145 10.4031 2.30448 8.80314L14.0378 0.00314331V24.0031L2.30448 15.2031Z"
+      fill={color}
+    />
+  </Svg>
+);
+export const BottomArrow = ({ color = IOColors.white }: { color?: string }) => (
+  <Svg fill={color}>
+    <Path
+      d="M15.2 2.26667C13.6 0.133334 10.4 0.133333 8.8 2.26667L0 14L24 14L15.2 2.26667Z"
+      fill={color}
+    />
+  </Svg>
+);
+export const TopArrow = ({ color = IOColors.white }: { color?: string }) => (
+  <Svg fill={color}>
+    <Path
+      d="M15.2 11.7333C13.6 13.8667 10.4 13.8667 8.8 11.7333L0 0L24 0L15.2 11.7333Z"
+      fill={color}
+    />
+  </Svg>
+);