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

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/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}

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -111,104 +111,27 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             }
           }
         />
-        <View
-          accessibilityLabel="Action text"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 14,
-              "left": 24,
-              "right": 24,
-              "top": 14,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          onTouchEnd={[Function]}
+        <Text
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
           style={
-            {
-              "alignSelf": "flex-start",
-            }
+            [
+              {},
+              {
+                "color": "#0B3EE3",
+                "fontFamily": "Titillio",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": undefined,
+              },
+            ]
           }
         >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "elevation": 0,
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "textAlignVertical": "center",
-                },
-                false,
-                {},
-                {
-                  "transform": [
-                    {
-                      "scale": undefined,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              accessible={false}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.25}
-              numberOfLines={1}
-              style={
-                [
-                  {},
-                  {
-                    "color": "#0E0F13",
-                    "fontFamily": "Titillio",
-                    "fontSize": 16,
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "color": undefined,
-                  },
-                ]
-              }
-            >
-              Action text
-            </Text>
-          </View>
-        </View>
+          Action text
+        </Text>
       </View>
     </View>
     <View
@@ -461,104 +384,27 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           }
         />
-        <View
-          accessibilityLabel="Action text"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 14,
-              "left": 24,
-              "right": 24,
-              "top": 14,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          onTouchEnd={[Function]}
+        <Text
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
           style={
-            {
-              "alignSelf": "flex-start",
-            }
+            [
+              {},
+              {
+                "color": "#0B3EE3",
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "lineHeight": undefined,
+              },
+            ]
           }
         >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "elevation": 0,
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "textAlignVertical": "center",
-                },
-                false,
-                {},
-                {
-                  "transform": [
-                    {
-                      "scale": undefined,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              accessible={false}
-              allowFontScaling={false}
-              ellipsizeMode="tail"
-              importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.25}
-              numberOfLines={1}
-              style={
-                [
-                  {},
-                  {
-                    "color": "#0E0F13",
-                    "fontFamily": "Titillium Sans Pro",
-                    "fontSize": 16,
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "color": undefined,
-                  },
-                ]
-              }
-            >
-              Action text
-            </Text>
-          </View>
-        </View>
+          Action text
+        </Text>
       </View>
     </View>
     <View

package/src/components/featureInfo/FeatureInfo.tsx

@@ -9,9 +9,9 @@ import {
   IOPictograms,
   Icon,
   Pictogram,
-  VSpacer
+  VStack
 } from "../../components";
-import { IOStyles } from "../../core";
+import { IOStyles, useIOTheme } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
@@ -42,11 +42,7 @@ const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 
 const renderNode = (body: FeatureInfoProps["body"]) => {
   if (typeof body === "string") {
-    return (
-      <BodySmall color="grey-700" testID="infoScreenBody">
-        {body}
-      </BodySmall>
-    );
+    return <BodySmall testID="infoScreenBody">{body}</BodySmall>;
   }
 
   return body;
@@ -57,23 +53,25 @@ export const FeatureInfo = ({
   pictogramName,
   body,
   action
-}: FeatureInfoProps) => (
-  <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
-    {iconName && (
-      <Icon name={iconName} size={DEFAULT_ICON_SIZE} color="grey-300" />
-    )}
-    {pictogramName && (
-      <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
-    )}
-    <HSpacer size={24} />
-    <View style={{ flexShrink: 1 }}>
-      {renderNode(body)}
-      {action && (
-        <>
-          {/* Add "marginTop" equivalent if body text is present.
-          This verbose code could be deleted once we got "gap"
-          property support */}
-          {body && <VSpacer size={4} />}
+}: FeatureInfoProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
+      {iconName && (
+        <Icon
+          name={iconName}
+          size={DEFAULT_ICON_SIZE}
+          color={theme["icon-decorative"]}
+        />
+      )}
+      {pictogramName && (
+        <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
+      )}
+      <HSpacer size={24} />
+      <VStack space={4} style={{ flexShrink: 1 }}>
+        {renderNode(body)}
+        {action && (
           <BodySmall
             weight="Semibold"
             asLink
@@ -84,8 +82,8 @@ export const FeatureInfo = ({
           >
             {action.label}
           </BodySmall>
-        </>
-      )}
+        )}
+      </VStack>
     </View>
-  </View>
-);
+  );
+};

package/src/components/spacer/Spacer.tsx

@@ -2,10 +2,8 @@ import React from "react";
 import { View } from "react-native";
 import { hexToRgba, IOColors, IOSpacer } from "../../core";
 
-export type SpacerOrientation = "vertical" | "horizontal";
-
 type BaseSpacerProps = {
-  orientation: SpacerOrientation;
+  orientation: "vertical" | "horizontal";
   size: IOSpacer;
 };
 
@@ -21,7 +19,7 @@ const debugBg = hexToRgba(IOColors.red, 0.2);
 
 /**
 Native `Spacer` component
-@param  {SpacerOrientation} orientation 
+@param  {string} orientation
 @param {IOSpacer} size
  */
 const Spacer = ({ orientation, size }: BaseSpacerProps) => {