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

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/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/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) => {

package/src/components/stack/Stack.tsx

@@ -1,28 +1,37 @@
-import React, { ReactNode } from "react";
+import React, { PropsWithChildren } from "react";
 import { View, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
 type AllowedStyleProps = Pick<
   ViewStyle,
-  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
+  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
 >;
 
-type Stack = {
+type Stack = PropsWithChildren<{
   space?: IOSpacer;
-  children: ReactNode;
   style?: AllowedStyleProps;
+}>;
+
+type BaseStack = Stack & {
+  orientation: "vertical" | "horizontal";
 };
 
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export const HStack = ({ space, children, style }: Stack) => (
+
+const Stack = ({
+  space,
+  style,
+  orientation = "vertical",
+  children
+}: BaseStack) => (
   <View
     style={{
       display: "flex",
-      flexDirection: "row",
-      columnGap: space,
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      gap: space,
       ...style
     }}
   >
@@ -30,20 +39,19 @@ export const HStack = ({ space, children, style }: Stack) => (
   </View>
 );
 
+export const HStack = ({ children, ...props }: Stack) => (
+  <Stack orientation="horizontal" {...props}>
+    {children}
+  </Stack>
+);
+
 /**
 Vertical Stack component
 @param {IOSpacer} space
  */
 
-export const VStack = ({ space, children, style }: Stack) => (
-  <View
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      rowGap: space,
-      ...style
-    }}
-  >
+export const VStack = ({ children, ...props }: Stack) => (
+  <Stack orientation="vertical" {...props}>
     {children}
-  </View>
+  </Stack>
 );

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",
@@ -232,6 +233,7 @@ export const IOColorsStatus = asIOColors({
 });
 
 export type IOColorsStatus = keyof typeof IOColorsStatus;
+
 export type IOColorsStatusForeground = Extract<
   IOColorsStatus,
   "error-850" | "warning-850" | "info-850" | "success-850"
@@ -283,7 +285,10 @@ const themeKeys = [
   // Status
   "errorIcon",
   "errorText",
+  "successIcon",
   "successText",
+  "warningIcon",
+  "infoIcon",
   // Pictograms
   "pictogram-hands",
   "pictogram-tint-main",
@@ -322,7 +327,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 +364,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 +373,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",