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

package/src/components/badge/Badge.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { ColorValue, Platform, StyleSheet, View } from "react-native";
 import {
+  hexToRgba,
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
   useIOExperimentalDesign,
-  useIOTheme
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
@@ -28,7 +30,7 @@ export type Badge = WithTestID<{
 }>;
 
 type SolidVariantProps = {
-  background: IOColors;
+  background: ColorValue;
   foreground: IOColors;
 };
 
@@ -60,54 +62,103 @@ const styles = StyleSheet.create({
 export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
 
-  const mapVariants: Record<
+  const bgOpacityDarkMode = 0.2;
+
+  const mapVariantsLightMode: Record<
     NonNullable<Badge["variant"]>,
     SolidVariantProps
   > = {
     default: {
       foreground: "grey-700",
-      background: "grey-50"
+      background: IOColors["grey-50"]
     },
     info: {
       foreground: "info-850",
-      background: "info-100"
+      background: IOColors["info-100"]
     },
     warning: {
       foreground: "warning-850",
-      background: "warning-100"
+      background: IOColors["warning-100"]
     },
     success: {
       foreground: "success-850",
-      background: "success-100"
+      background: IOColors["success-100"]
     },
     error: {
       foreground: "error-850",
-      background: "error-100"
+      background: IOColors["error-100"]
     },
     purple: {
       foreground: "hanPurple-500",
-      background: "hanPurple-100"
+      background: IOColors["hanPurple-100"]
     },
     lightBlue: {
       foreground: "blueIO-850",
-      background: "blueIO-50"
+      background: IOColors["blueIO-50"]
     },
     blue: {
       foreground: "white",
-      background: theme["interactiveElem-default"]
+      background: IOColors[theme["interactiveElem-default"]]
     },
     turquoise: {
       foreground: "turquoise-850",
-      background: "turquoise-50"
+      background: IOColors["turquoise-50"]
+    },
+    contrast: {
+      foreground: "grey-700",
+      background: IOColors.white
+    }
+  };
+
+  const mapVariantsDarkMode: Record<
+    NonNullable<Badge["variant"]>,
+    SolidVariantProps
+  > = {
+    default: {
+      foreground: "grey-50",
+      background: hexToRgba(IOColors["grey-50"], bgOpacityDarkMode)
+    },
+    info: {
+      foreground: "info-400",
+      background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode)
+    },
+    warning: {
+      foreground: "warning-400",
+      background: hexToRgba(IOColors["warning-400"], bgOpacityDarkMode)
+    },
+    success: {
+      foreground: "success-400",
+      background: hexToRgba(IOColors["success-400"], bgOpacityDarkMode)
+    },
+    error: {
+      foreground: "error-400",
+      background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode)
+    },
+    purple: {
+      foreground: "hanPurple-250",
+      background: hexToRgba(IOColors["hanPurple-250"], bgOpacityDarkMode)
+    },
+    lightBlue: {
+      foreground: "blueIO-200",
+      background: hexToRgba(IOColors["blueIO-600"], bgOpacityDarkMode)
+    },
+    blue: {
+      foreground: "white",
+      background: IOColors[theme["interactiveElem-default"]]
+    },
+    turquoise: {
+      foreground: "turquoise-300",
+      background: hexToRgba(IOColors["turquoise-300"], bgOpacityDarkMode)
     },
     contrast: {
       foreground: "grey-700",
-      background: "white"
+      background: IOColors.white
     }
   };
 
-  const mapOutlineVariants: Record<
+  const mapOutlineVariantsLightMode: Record<
     NonNullable<Badge["variant"]>,
     OutlinedVariantProps
   > = {
@@ -143,9 +194,48 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
     }
   };
 
-  const { background, foreground } = (
-    outline ? mapOutlineVariants : mapVariants
-  )[variant];
+  const mapOutlineVariantsDarkMode: Record<
+    NonNullable<Badge["variant"]>,
+    OutlinedVariantProps
+  > = {
+    default: {
+      foreground: "grey-100"
+    },
+    info: {
+      foreground: "info-400"
+    },
+    warning: {
+      foreground: "warning-400"
+    },
+    success: {
+      foreground: "success-400"
+    },
+    error: {
+      foreground: "error-400"
+    },
+    purple: {
+      foreground: "hanPurple-250"
+    },
+    lightBlue: {
+      foreground: "blueIO-150"
+    },
+    blue: {
+      foreground: theme["interactiveElem-default"]
+    },
+    turquoise: {
+      foreground: "turquoise-300"
+    },
+    contrast: {
+      foreground: "grey-100"
+    }
+  };
+
+  // prettier-ignore
+  const variantMap = themeType === "light"
+    ? (outline ? mapOutlineVariantsLightMode : mapVariantsLightMode)
+    : (outline ? mapOutlineVariantsDarkMode : mapVariantsDarkMode);
+
+  const { background, foreground } = variantMap[variant];
 
   return (
     <View
@@ -159,7 +249,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
               borderColor: IOColors[foreground]
             }
           : {
-              backgroundColor: background ? IOColors[background] : undefined
+              backgroundColor: background ?? undefined
             }
       ]}
     >

package/src/components/modules/ModuleCredential.tsx

@@ -3,15 +3,13 @@ import {
   Image,
   ImageSourcePropType,
   ImageURISource,
-  StyleSheet,
-  View
+  StyleSheet
 } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -43,26 +41,28 @@ type BaseModuleProps = {
 };
 
 type ModuleCredentialProps =
-  | LoadingModuleProps
-  | (BaseModuleProps & ImageProps & PressableModuleBaseProps);
+  | BaseModuleProps & ImageProps & PressableModuleBaseProps;
 
-const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
-  const theme = useIOTheme();
-
-  if (props.isLoading) {
-    return <ModuleCredentialSkeleton />;
-  }
+const ModuleCredential = (
+  props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
+) =>
+  props.isLoading ? (
+    <ModuleCredentialSkeleton />
+  ) : (
+    <ModuleCredentialContent {...props} />
+  );
 
-  const {
-    testID,
-    icon,
-    image,
-    label,
-    onPress,
-    badge,
-    isFetching,
-    ...pressableProps
-  } = props;
+const ModuleCredentialContent = ({
+  testID,
+  icon,
+  image,
+  label,
+  onPress,
+  badge,
+  isFetching,
+  ...pressableProps
+}: WithTestID<ModuleCredentialProps>) => {
+  const theme = useIOTheme();
 
   const iconComponent = icon && (
     <Icon
@@ -80,6 +80,33 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
     />
   );
 
+  const endComponent = React.useMemo(() => {
+    if (isFetching) {
+      return (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+          color={theme["interactiveElem-default"]}
+        />
+      );
+    }
+    if (badge) {
+      return (
+        <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
+      );
+    }
+    if (onPress) {
+      return (
+        <Icon
+          testID={testID ? `${testID}_icon` : undefined}
+          name="chevronRightListItem"
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      );
+    }
+    return null;
+  }, [testID, theme, isFetching, badge, onPress]);
+
   const ModuleContent = () => (
     <HStack space={8} style={{ alignItems: "center" }}>
       <HStack
@@ -99,24 +126,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           {label}
         </BodySmall>
       </HStack>
-      <View style={IOStyles.row}>
-        {badge ? (
-          <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
-        ) : null}
-        {isFetching ? (
-          <LoadingSpinner
-            testID={testID ? `${testID}_activityIndicator` : undefined}
-            color={theme["interactiveElem-default"]}
-          />
-        ) : onPress ? (
-          <Icon
-            testID={testID ? `${testID}_icon` : undefined}
-            name="chevronRightListItem"
-            color={theme["interactiveElem-default"]}
-            size={IOListItemVisualParams.chevronSize}
-          />
-        ) : null}
-      </View>
+      {endComponent}
     </HStack>
   );
 

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

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

package/src/components/stack/Stack.tsx

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

@@ -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/typography/IOText.tsx

@@ -10,7 +10,6 @@ import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
   IOFontFamily,
-  IOFontSize,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -37,7 +36,7 @@ export type TypographicStyleProps = Omit<
  * cannot be included in the default StyleProp<TextStyle>
  */
 type IOTextBaseProps = {
-  size?: IOFontSize;
+  size?: number;
   weight?: IOFontWeight;
   color?: IOColors;
   font?: IOFontFamily;

package/src/core/IOColors.ts

@@ -53,6 +53,7 @@ export const IOColors = asIOColors({
   "turquoise-850": "#003B3D",
   "turquoise-500": "#00C5CA",
   "turquoise-450": "#19CBCF" /* Dark mode */,
+  "turquoise-300": "#61DCDF",
   "turquoise-150": "#AAEEEF",
   "turquoise-100": "#C2F3F4",
   "turquoise-50": "#DBF9FA",
@@ -283,7 +284,10 @@ const themeKeys = [
   // Status
   "errorIcon",
   "errorText",
+  "successIcon",
   "successText",
+  "warningIcon",
+  "infoIcon",
   // Pictograms
   "pictogram-hands",
   "pictogram-tint-main",
@@ -322,7 +326,10 @@ export const IOThemeLight: IOTheme = {
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
+  successIcon: "success-700",
   successText: "success-700",
+  warningIcon: "warning-700",
+  infoIcon: "info-700",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
@@ -356,6 +363,7 @@ export const IOThemeDark: IOTheme = {
   // Design System related
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
+  "icon-decorative": "grey-650",
   // Layout
   "divider-header": "grey-850",
   "divider-default": "grey-850",
@@ -364,6 +372,9 @@ export const IOThemeDark: IOTheme = {
   errorIcon: "error-400",
   errorText: "error-400",
   successText: "success-400",
+  successIcon: "success-500",
+  warningIcon: "warning-500",
+  infoIcon: "info-500",
   // Pictograms
   "pictogram-hands": "white",
   "pictogram-tint-main": "turquoise-150",

package/src/utils/fonts.ts

@@ -73,7 +73,7 @@ export const fontWeights: Record<IOFontWeight, IOFontWeightNumeric> = {
 };
 
 type FontStyleObject = {
-  fontSize: IOFontSize;
+  fontSize: IOFontSize | number;
   /* We also accept `string` because Android needs a composed 
   fontFamily name, like `TitilliumSansPro-Regular` */
   fontFamily: string | IOFontFamily;
@@ -132,7 +132,7 @@ const defaultFontSize: IOFontSize = 16;
  */
 
 export const makeFontStyleObject = (
-  size: IOFontSize = defaultFontSize,
+  size: number = defaultFontSize,
   font: IOFontFamily = defaultFont,
   lineHeight: TextStyle["lineHeight"],
   weight: IOFontWeight = defaultWeight,