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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import {
+  ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
   PixelRatio,
@@ -17,13 +18,9 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOVisualCostants } from "../../core";
+import { IOVisualCostants, useIOThemeContext } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
-import {
-  IOColors,
-  IOColorsStatusBackground,
-  IOColorsStatusForeground
-} from "../../core/IOColors";
+import { IOColors, hexToRgba } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
@@ -75,38 +72,66 @@ type AlertType = AlertProps & AlertActionProps;
 
 type VariantStates = {
   icon: IOIcons;
-  background: IOColorsStatusBackground;
-  foreground: IOColorsStatusForeground;
+  background: ColorValue;
+  foreground: IOColors;
 };
 
 // COMPONENT CONFIGURATION
 
-const mapVariantStates: Record<
+const mapVariantStatesLightMode: Record<
   NonNullable<AlertType["variant"]>,
   VariantStates
 > = {
   error: {
     icon: "errorFilled",
-    background: "error-100",
+    background: IOColors["error-100"],
     foreground: "error-850"
   },
   warning: {
     icon: "warningFilled",
-    background: "warning-100",
+    background: IOColors["warning-100"],
     foreground: "warning-850"
   },
   info: {
     icon: "infoFilled",
-    background: "info-100",
+    background: IOColors["info-100"],
     foreground: "info-850"
   },
   success: {
     icon: "success",
-    background: "success-100",
+    background: IOColors["success-100"],
     foreground: "success-850"
   }
 };
 
+const bgOpacityDarkMode = 0.2;
+
+const mapVariantStatesDarkMode: Record<
+  NonNullable<AlertType["variant"]>,
+  VariantStates
+> = {
+  error: {
+    icon: "errorFilled",
+    background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode),
+    foreground: "error-100"
+  },
+  warning: {
+    icon: "warningFilled",
+    background: hexToRgba(IOColors["warning-400"], bgOpacityDarkMode),
+    foreground: "warning-100"
+  },
+  info: {
+    icon: "infoFilled",
+    background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode),
+    foreground: "info-100"
+  },
+  success: {
+    icon: "success",
+    background: hexToRgba(IOColors["success-400"], bgOpacityDarkMode),
+    foreground: "success-100"
+  }
+};
+
 export const Alert = React.forwardRef<View, AlertType>(
   (
     {
@@ -121,6 +146,7 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
+    const { themeType } = useIOThemeContext();
     const isPressed: SharedValue<number> = useSharedValue(0);
 
     const [isMultiline, setIsMultiline] = useState(false);
@@ -164,6 +190,11 @@ export const Alert = React.forwardRef<View, AlertType>(
       isPressed.value = 0;
     }, [isPressed]);
 
+    const mapVariantStates =
+      themeType === "light"
+        ? mapVariantStatesLightMode
+        : mapVariantStatesDarkMode;
+
     const renderMainBlock = () => (
       <>
         <View
@@ -226,7 +257,7 @@ export const Alert = React.forwardRef<View, AlertType>(
         style={[
           styles.container,
           fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
-          { backgroundColor: IOColors[mapVariantStates[variant].background] }
+          { backgroundColor: mapVariantStates[variant].background }
         ]}
         testID={testID}
         accessible={false}
@@ -254,7 +285,7 @@ export const Alert = React.forwardRef<View, AlertType>(
           style={[
             styles.container,
             fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
-            { backgroundColor: IOColors[mapVariantStates[variant].background] },
+            { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
             !fullWidth && pressedAnimationStyle
           ]}

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/banner/Banner.tsx

@@ -8,8 +8,9 @@ import {
   ViewStyle
 } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   interpolate,
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -22,26 +23,26 @@ import {
   IOBannerSmallVSpacing,
   IOScaleValues,
   IOSpringValues,
-  IOStyles
+  IOStyles,
+  useIOExperimentalDesign,
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
-import { IOColors } from "../../core/IOColors";
+import { hexToRgba, IOColors } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
-import { ButtonLink, IconButton } from "../buttons";
+import { IconButton } from "../buttons";
 import {
-  IOPictogramSizeScale,
   IOPictogramsBleed,
+  IOPictogramSizeScale,
   PictogramBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
-import { H6, BodySmall } from "../typography";
+import { buttonTextFontSize, H6, IOText, BodySmall } from "../typography";
 
 /* Styles */
-const colorTitle: IOColors = "blueIO-850";
-const colorContent: IOColors = "grey-700";
-const colorCloseButton: IconButton["color"] = "neutral";
 const sizePictogramBig: IOPictogramSizeScale = 80;
 const sizePictogramSmall: IOPictogramSizeScale = 64;
-const closeButtonDistanceFromEdge: number = 4;
+const closeButtonDistanceFromEdge: number = 6;
 const closeButtonOpacity = 0.6;
 const sizeBigPadding = IOBannerBigSpacing;
 const sizeSmallHPadding = IOBannerSmallHSpacing;
@@ -66,15 +67,6 @@ const styles = StyleSheet.create({
   }
 });
 
-const dynamicContainerStyles = (
-  size: BaseBannerProps["size"],
-  color: BaseBannerProps["color"]
-): ViewStyle => ({
-  backgroundColor: IOColors[mapBackgroundColor[color]],
-  paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
-  paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
-});
-
 /* Component Types */
 
 type BaseBannerProps = WithTestID<{
@@ -136,7 +128,7 @@ export const bannerBackgroundColours: Array<BaseBannerProps["color"]> = [
   "turquoise"
 ];
 
-const mapBackgroundColor: Record<
+const mapBackgroundColorLightMode: Record<
   NonNullable<BaseBannerProps["color"]>,
   IOColors
 > = {
@@ -144,6 +136,14 @@ const mapBackgroundColor: Record<
   turquoise: "turquoise-50"
 };
 
+const mapBackgroundColorDarkMode: Record<
+  NonNullable<BaseBannerProps["color"]>,
+  IOColors
+> = {
+  neutral: "grey-50",
+  turquoise: "turquoise-300"
+};
+
 export const Banner = ({
   viewRef,
   size,
@@ -159,7 +159,27 @@ export const Banner = ({
   accessibilityLabel,
   testID
 }: Banner) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: SharedValue<number> = useSharedValue(0);
+
+  const { isExperimental } = useIOExperimentalDesign();
+  const { themeType } = useIOThemeContext();
+  const theme = useIOTheme();
+
+  // Dynamic colors
+  const colorTitle: IOColors = themeType === "dark" ? "grey-50" : "blueIO-850";
+  const colorCloseButton: IconButton["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+  const colorMainButton =
+    themeType === "dark" ? "blueIO-200" : theme["interactiveElem-default"];
+
+  const dynamicContainerStyles: ViewStyle = {
+    backgroundColor:
+      themeType === "dark"
+        ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
+        : IOColors[mapBackgroundColorLightMode[color]],
+    paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
+    paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
+  };
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -178,7 +198,7 @@ export const Banner = ({
       progressPressed.value,
       [0, 1],
       [1, animationScaleValue],
-      Extrapolate.CLAMP
+      Extrapolation.CLAMP
     );
 
     return {
@@ -221,7 +241,7 @@ export const Banner = ({
         )}
         {content && (
           <>
-            <BodySmall color={colorContent} weight={"Regular"}>
+            <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
               {content}
             </BodySmall>
             {action && <VSpacer size={8} />}
@@ -236,13 +256,21 @@ export const Banner = ({
             importantForAccessibility="no-hide-descendants"
           >
             <VSpacer size={4} />
-            <ButtonLink color="primary" onPress={onPress} label={action} />
+            <IOText
+              font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+              weight={isExperimental ? "Regular" : "Bold"}
+              color={colorMainButton}
+              size={buttonTextFontSize}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {action}
+            </IOText>
           </View>
         )}
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
         <PictogramBleed
-          pictogramStyle="dark-content"
           name={pictogramName}
           size={size === "big" ? sizePictogramBig : sizePictogramSmall}
         />
@@ -272,7 +300,7 @@ export const Banner = ({
       <Animated.View
         style={[
           styles.container,
-          dynamicContainerStyles(size, color),
+          dynamicContainerStyles,
           pressedAnimationStyle
         ]}
       >
@@ -285,7 +313,7 @@ export const Banner = ({
     <View
       ref={viewRef}
       testID={testID}
-      style={[styles.container, dynamicContainerStyles(size, color)]}
+      style={[styles.container, dynamicContainerStyles]}
       // A11y related props
       accessible={false}
       accessibilityHint={accessibilityHint}