npm - @pagopa/io-app-design-system - Versions diffs - 3.1.0 → 4.0.1 - Mend

@pagopa/io-app-design-system 3.1.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (278) hide show

package/src/components/modules/ModuleAttachment.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap CHANGED Viewed

@@ -13,7 +13,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
       {
         "display": "flex",
         "flexDirection": "column",
-        "rowGap": 16,
+        "gap": 16,
       }
     }
   >

package/src/components/otpInput/BoxedInput.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/stack/Stack.tsx CHANGED Viewed

@@ -22,7 +22,7 @@ export const HStack = ({ space, children, style }: Stack) => (
     style={{
       display: "flex",
       flexDirection: "row",
-      columnGap: space,
+      gap: space,
       ...style
     }}
   >
@@ -40,7 +40,7 @@ export const VStack = ({ space, children, style }: Stack) => (
     style={{
       display: "flex",
       flexDirection: "column",
-      rowGap: space,
+      gap: space,
       ...style
     }}
   >

package/src/components/tabs/TabItem.tsx CHANGED Viewed

@@ -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/tag/Tag.tsx CHANGED Viewed

@@ -3,6 +3,8 @@ import { Platform, StyleSheet, View } from "react-native";
 import {
   IOColors,
   IOTagRadius,
+  IOTheme,
+  IOThemeLight,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
@@ -15,9 +17,21 @@ import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOText } from "../typography";
+const IconColorsMap: Record<string, keyof IOTheme> = {
+  primary: "interactiveElem-default",
+  warning: "warningIcon",
+  error: "errorIcon",
+  success: "successIcon",
+  info: "infoIcon",
+  grey: "icon-default",
+  lightGrey: "icon-decorative"
+};
+type IconColorVariant = keyof typeof IconColorsMap;
 type VariantProps = {
-  iconColor: IOColors;
-  iconName: IOIcons;
+  color: IconColorVariant;
+  name: IOIcons;
 };
 type TextProps =
@@ -30,8 +44,7 @@ type TextProps =
       iconAccessibilityLabel: string;
     };
-export type Tag = TextProps &
-  WithTestID<
+export type Tag = TextProps & { forceLightMode?: boolean } & WithTestID<
     | {
         variant:
           | "qrCode"
@@ -42,11 +55,12 @@ export type Tag = TextProps &
           | "success"
           | "attachment"
           | "noIcon";
-        customIconProps?: never;
+        iconName?: never;
+        icon?: never;
       }
     | {
-        variant: "customIcon";
-        customIconProps: VariantProps;
+        variant: "custom";
+        icon: VariantProps;
       }
   >;
@@ -64,9 +78,7 @@ const styles = StyleSheet.create({
         textAlignVertical: "center"
       }
     }),
-    backgroundColor: IOColors.white,
     borderWidth: 1,
-    borderColor: IOColors["grey-100"],
     borderRadius: IOTagRadius,
     borderCurve: "continuous",
     paddingHorizontal: IOTagHSpacing,
@@ -82,45 +94,46 @@ const styles = StyleSheet.create({
 const getVariantProps = (
   variant: NonNullable<Tag["variant"]>,
-  customIconProps?: VariantProps
+  customIcon?: VariantProps
 ): VariantProps | undefined => {
+  if (variant === "custom" && customIcon) {
+    return customIcon;
+  }
   switch (variant) {
-    case "customIcon":
-      return customIconProps;
     case "qrCode":
       return {
-        iconColor: "blueIO-500",
-        iconName: "qrCode"
+        color: "primary",
+        name: "qrCode"
       };
     case "attachment":
       return {
-        iconColor: "grey-700",
-        iconName: "attachment"
+        color: "grey",
+        name: "attachment"
       };
     case "legalMessage":
       return {
-        iconColor: "blueIO-500",
-        iconName: "legalValue"
+        color: "primary",
+        name: "legalValue"
       };
     case "info":
       return {
-        iconColor: "info-700",
-        iconName: "info"
+        color: "info",
+        name: "infoFilled"
       };
     case "warning":
       return {
-        iconColor: "warning-700",
-        iconName: "warningFilled"
+        color: "warning",
+        name: "warningFilled"
       };
     case "error":
       return {
-        iconColor: "error-600",
-        iconName: "errorFilled"
+        color: "error",
+        name: "errorFilled"
       };
     case "success":
       return {
-        iconColor: "success-700",
-        iconName: "success"
+        color: "success",
+        name: "success"
       };
     case "noIcon":
       return undefined;
@@ -136,21 +149,37 @@ export const Tag = ({
   text,
   variant,
   testID,
-  customIconProps,
-  iconAccessibilityLabel
+  icon,
+  iconAccessibilityLabel,
+  forceLightMode = false
 }: Tag) => {
   const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
-  const variantProps = getVariantProps(variant, customIconProps);
+  const variantProps = getVariantProps(variant, icon);
+  const borderColor = forceLightMode
+    ? IOColors[IOThemeLight["cardBorder-default"]]
+    : IOColors[theme["cardBorder-default"]];
+  const backgroundColor = forceLightMode
+    ? IOColors[IOThemeLight["appBackground-primary"]]
+    : IOColors[theme["appBackground-primary"]];
   return (
-    <View testID={testID} style={styles.tag}>
+    <View
+      testID={testID}
+      style={[styles.tag, { borderColor, backgroundColor }]}
+    >
       {variantProps && (
         <View style={styles.iconWrapper}>
           <Icon
-            name={variantProps.iconName}
-            color={variantProps.iconColor}
+            name={variantProps.name}
+            color={
+              forceLightMode
+                ? IOThemeLight[IconColorsMap[variantProps.color]]
+                : theme[IconColorsMap[variantProps.color]]
+            }
             size={IOTagIconSize}
             accessible={!!iconAccessibilityLabel}
             accessibilityLabel={iconAccessibilityLabel}
@@ -164,7 +193,11 @@ export const Tag = ({
           weight={"Semibold"}
           size={12}
           lineHeight={16}
-          color={theme["textBody-tertiary"]}
+          color={
+            forceLightMode
+              ? IOThemeLight["textBody-tertiary"]
+              : theme["textBody-tertiary"]
+          }
           numberOfLines={1}
           ellipsizeMode="tail"
           style={{

package/src/components/textInput/TextInputBase.tsx CHANGED Viewed

@@ -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/typography/Body.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 } from "./IOText";
 type BodyStyleProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 export const bodyFontSize = 16;

package/src/components/typography/{LabelSmall.tsx → BodySmall.tsx} RENAMED Viewed

@@ -9,20 +9,17 @@ import {
   TypographicStyleProps
 } from "./IOText";
-type LabelSmallProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+type BodySmallProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 /**
- * `LabelSmall` typographic style
+ * `BodySmall` typographic style
  */
-export const LabelSmall = forwardRef<View, LabelSmallProps>(
+export const BodySmall = forwardRef<View, BodySmallProps>(
   (
     { weight: customWeight, color: customColor, asLink, ...props },
     ref?: ForwardedRef<View>
@@ -34,15 +31,11 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
       ? theme["interactiveElem-default"]
       : theme["textBody-tertiary"];
-    const LabelSmallProps: IOTextProps = {
+    const BodySmallProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
       font: isExperimental ? fontName : legacyFontName,
-      weight: customWeight
-        ? customWeight
-        : isExperimental
-        ? fontWeight
-        : legacyFontWeight,
+      weight: customWeight ?? "Regular",
       size: 14,
       lineHeight: 21,
       color: customColor ?? defaultColor,
@@ -55,7 +48,7 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
     };
     return (
-      <IOText ref={ref} {...LabelSmallProps}>
+      <IOText ref={ref} {...BodySmallProps}>
         {props.children}
       </IOText>
     );

package/src/components/typography/ButtonText.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 export const buttonTextFontSize: IOFontSize = 16;
@@ -10,11 +10,9 @@ export const buttonTextFontSize: IOFontSize = 16;
 `AnimatedText` for color transition through Reanimated */
 const defaultColor: IOColors = "white";
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Bold";
 /**
  * `ButtonText` typographic style
@@ -26,7 +24,7 @@ export const ButtonText = forwardRef<View, TypographicStyleProps>(
     const ButtonTextProps: IOTextProps = {
       ...props,
       font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      weight: "Semibold",
       size: buttonTextFontSize,
       lineHeight: 20,
       color: customColor ?? defaultColor

package/src/components/typography/H3.tsx CHANGED Viewed

@@ -1,26 +1,29 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
-const defaultColor: keyof IOTheme = "textHeading-default";
+type H3StyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
+};
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 /**
  * `H3` typographic style
  */
-export const H3 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+export const H3 = forwardRef<View, H3StyleProps>(
+  (
+    { weight: customWeight, color: customColor, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
     const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
@@ -28,10 +31,10 @@ export const H3 = forwardRef<View, TypographicStyleProps>(
       ...props,
       dynamicTypeRamp: "title2", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      weight: customWeight ?? "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,
-      color: customColor ?? theme[defaultColor]
+      color: customColor ?? theme["textHeading-default"]
     };
     return (