@pagopa/io-app-design-system 1.7.1 → 1.9.0

package/src/components/buttons/ButtonOutline.tsx

@@ -21,19 +21,14 @@ import {
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import {
-  AnimatedIcon,
-  IOIconSizeScale,
-  IOIcons,
-  IconClassComponent
-} from "../icons";
+import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
+import { buttonTextFontSize } from "../typography";
 
-type ColorButtonOutline = "primary" | "neutral" | "contrast" | "danger";
+type ColorButtonOutline = "primary" | "contrast" | "danger";
 export type ButtonOutline = WithTestID<{
   color?: ColorButtonOutline;
   label: string;
-  small?: boolean;
   fullWidth?: boolean;
   disabled?: boolean;
   // Icons
@@ -85,24 +80,6 @@ const mapColorStates: Record<
       disabled: IOColors["grey-700"]
     }
   },
-  // Neutral button
-  neutral: {
-    border: {
-      default: IOColors.grey,
-      pressed: IOColors.bluegrey,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.bluegrey,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
   // Contrast button
   contrast: {
     border: {
@@ -164,24 +141,6 @@ const mapLegacyColorStates: Record<
       disabled: IOColors.grey
     }
   },
-  // Neutral button
-  neutral: {
-    border: {
-      default: IOColors.grey,
-      pressed: IOColors.bluegrey,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.bluegrey,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
   // Contrast button
   contrast: {
     border: {
@@ -237,7 +196,8 @@ const DISABLED_OPACITY = 0.5;
 const IOButtonStylesLocal = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: buttonTextFontSize
   },
   // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
@@ -248,7 +208,6 @@ const IOButtonStylesLocal = StyleSheet.create({
 export const ButtonOutline = ({
   color = "primary",
   label,
-  small = false,
   fullWidth = false,
   disabled = false,
   icon,
@@ -349,9 +308,6 @@ export const ButtonOutline = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  // Icon size
-  const iconSize: IOIconSizeScale = small ? 16 : 20;
-
   return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
@@ -369,8 +325,8 @@ export const ButtonOutline = ({
         style={[
           buttonStyles.button,
           buttonStylesLocal.buttonWithBorder,
+          buttonStyles.buttonSizeDefault,
           iconPosition === "end" && { flexDirection: "row-reverse" },
-          small ? buttonStyles.buttonSizeSmall : buttonStyles.buttonSizeDefault,
           disabled
             ? {
                 backgroundColor: colorMap[color]?.background?.disabled,
@@ -393,13 +349,11 @@ export const ButtonOutline = ({
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
                 color={colorMap[color]?.label?.default}
-                size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
                 color={colorMap[color]?.label?.disabled}
-                size={iconSize}
               />
             )}
             <HSpacer size={8} />
@@ -409,7 +363,6 @@ export const ButtonOutline = ({
           style={[
             buttonStylesLocal.label,
             buttonStyles.label,
-            small ? buttonStyles.labelSizeSmall : buttonStyles.labelSizeDefault,
             disabled
               ? { color: colorMap[color]?.label?.disabled }
               : { color: colorMap[color]?.label?.default },

package/src/components/buttons/ButtonSolid.tsx

@@ -12,7 +12,7 @@ import Animated, {
 import { IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
-import { BaseTypography } from "../typography/BaseTypography";
+import { ButtonText, ButtonTextAllowedColors } from "../typography/ButtonText";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
@@ -28,8 +28,8 @@ type ColorStates = {
   default: string;
   pressed: string;
   label: {
-    default: IOColors;
-    disabled: IOColors;
+    default: ButtonTextAllowedColors;
+    disabled: ButtonTextAllowedColors;
   };
 };
 
@@ -142,7 +142,7 @@ const mapLegacyColorStates: Record<
     default: IOColors.white,
     pressed: IOColors["blue-50"],
     label: {
-      default: "blue",
+      default: "blueIO-500",
       disabled: "white"
     }
   }
@@ -239,9 +239,7 @@ export const ButtonSolid = React.memo(
           style={[
             buttonStyles.button,
             iconPosition === "end" && { flexDirection: "row-reverse" },
-            small
-              ? buttonStyles.buttonSizeSmall
-              : buttonStyles.buttonSizeDefault,
+            buttonStyles.buttonSizeDefault,
             disabled
               ? isExperimental
                 ? styles.backgroundDisabled
@@ -262,16 +260,9 @@ export const ButtonSolid = React.memo(
               <HSpacer size={8} />
             </>
           )}
-          <BaseTypography
-            font={isExperimental ? "ReadexPro" : undefined}
-            weight={isExperimental ? "Regular" : "Bold"}
+          <ButtonText
             color={foregroundColor}
-            style={[
-              buttonStyles.label,
-              small
-                ? buttonStyles.labelSizeSmall
-                : buttonStyles.labelSizeDefault
-            ]}
+            style={IOButtonStyles.label}
             numberOfLines={1}
             ellipsizeMode="tail"
             /* A11y-related props:
@@ -280,7 +271,7 @@ export const ButtonSolid = React.memo(
                 maxFontSizeMultiplier={1.3} */
           >
             {label}
-          </BaseTypography>
+          </ButtonText>
         </Animated.View>
       </Pressable>
     );

package/src/components/buttons/IconButtonSolid.tsx

@@ -14,7 +14,8 @@ import {
   IOButtonStyles,
   IOIconButtonStyles,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
@@ -70,6 +71,36 @@ const mapColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const mapLegacyColorStates: Record<
+  NonNullable<IconButtonSolid["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
+      disabled: IOColors["grey-100"]
+    },
+    icon: {
+      default: IOColors.white,
+      disabled: IOColors["grey-450"]
+    }
+  },
+  contrast: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors["blue-50"],
+      disabled: hexToRgba(IOColors.white, 0.25)
+    },
+    icon: {
+      default: IOColors.blue,
+      disabled: IOColors.blue
+    }
+  }
+};
+
 export const IconButtonSolid = ({
   icon,
   color = "primary",
@@ -80,7 +111,7 @@ export const IconButtonSolid = ({
   testID
 }: IconButtonSolid) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
@@ -89,15 +120,16 @@ export const IconButtonSolid = ({
     withSpring(isPressed.value, IOSpringValues.button)
   );
 
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
   // Interpolate animation values from `isPressed` values
   const pressedAnimationStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -123,7 +155,7 @@ export const IconButtonSolid = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  const NewButton = () => (
+  return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -143,10 +175,10 @@ export const IconButtonSolid = ({
           !disabled && pressedAnimationStyle,
           disabled
             ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled
+                backgroundColor: colorMap[color]?.background?.disabled
               }
             : {
-                backgroundColor: mapColorStates[color]?.background?.default
+                backgroundColor: colorMap[color]?.background?.default
               }
         ]}
       >
@@ -154,15 +186,13 @@ export const IconButtonSolid = ({
           name={icon}
           color={
             !disabled
-              ? mapColorStates[color]?.icon?.default
-              : mapColorStates[color]?.icon?.disabled
+              ? colorMap[color]?.icon?.default
+              : colorMap[color]?.icon?.disabled
           }
         />
       </Animated.View>
     </Pressable>
   );
-
-  return <NewButton />;
 };
 
 export default IconButtonSolid;

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -69,29 +69,29 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
       <Text
         color="black"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 20,
+            "fontSize": 16,
             "lineHeight": 24,
           }
         }
         style={
           [
             {
-              "fontSize": 20,
+              "fontSize": 16,
               "lineHeight": 24,
             },
             {
               "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
             },
           ]
         }
-        weight="Regular"
+        weight="SemiBold"
       >
         label
       </Text>
@@ -311,10 +311,10 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "borderWidth": 1,
         },
-        false,
         {
           "height": 40,
         },
+        false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
           "borderColor": "#0073E6",
@@ -344,9 +344,6 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
           {
             "alignSelf": "center",
           },
-          {
-            "fontSize": 16,
-          },
           {
             "color": "#0073E6",
           },
@@ -433,19 +430,24 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   >
     <Text
       color="white"
+      defaultColor="white"
+      defaultWeight="Bold"
       ellipsizeMode="tail"
+      font="TitilliumWeb"
+      fontStyle={
+        {
+          "fontSize": 16,
+        }
+      }
       numberOfLines={1}
       style={
         [
-          [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
-          ],
-          undefined,
+          {
+            "alignSelf": "center",
+          },
+          {
+            "fontSize": 16,
+          },
           {
             "color": "#FFFFFF",
             "fontFamily": "Titillium Web",
@@ -764,7 +766,7 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
           ],
         },
         {
-          "backgroundColor": "#0B3EE3",
+          "backgroundColor": "#0073E6",
         },
       ]
     }

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -8,9 +8,13 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import {
+  IOSelectionTickLegacyVisualParams,
+  IOSelectionTickVisualParams
+} from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -52,6 +56,25 @@ const styles = StyleSheet.create({
 export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
   const isChecked = checked ?? false;
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const borderColorOffState =
+    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBorderColorOffState =
+    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
+  const borderColorProp = isExperimental
+    ? borderColorOffState
+    : legacyBorderColorOffState;
+
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
+
   const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
@@ -89,8 +112,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkboxBorder,
           {
-            borderColor:
-              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+            borderColor: borderColorProp
           }
         ]}
       />
@@ -98,8 +120,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkBoxSquare,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxSquare
         ]}

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -1,21 +1,23 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOColors } from "../../core/IOColors";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
-import { AnimatedTick } from "../common/AnimatedTick";
+import { IOColors } from "../../core/IOColors";
+import { IOSpacingScale } from "../../core/IOSpacing";
 import {
+  IOSelectionTickLegacyVisualParams,
   IOSelectionTickVisualParams,
   IOVisualCostants
 } from "../../core/IOStyles";
-import { IOSpacingScale } from "../../core/IOSpacing";
+import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
   checked?: boolean;
@@ -50,9 +52,18 @@ export const AnimatedMessageCheckbox = ({
   onPress
 }: AnimatedMessageCheckbox) => {
   const isChecked = checked ?? true;
+  const { isExperimental } = useIOExperimentalDesign();
 
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
 
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
@@ -87,8 +98,7 @@ export const AnimatedMessageCheckbox = ({
         style={[
           styles.checkBoxCircle,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxCircle
         ]}

package/src/components/checkbox/CheckboxLabel.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
-import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { H6 } from "../typography/H6";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
+import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
+import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
 
 type Props = {
@@ -21,6 +23,17 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const styles = StyleSheet.create({
+  legacyTextValue: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: IOColors.bluegreyDark,
+    flexShrink: 1,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
+
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -36,6 +49,22 @@ export const CheckboxLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const checkboxLabelText = (
+    <H6 style={{ flexShrink: 1 }} color={"black"}>
+      {label}
+    </H6>
+  );
+
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyCheckboxlabelText = (
+    <Text style={styles.legacyTextValue}>{label}</Text>
+  );
+
+  const checkboxLabelTextComponent = isExperimental
+    ? checkboxLabelText
+    : legacyCheckboxlabelText;
+
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -67,9 +96,7 @@ export const CheckboxLabel = ({
           <AnimatedCheckbox checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 color={"black"} style={{ flexShrink: 1 }}>
-          {label}
-        </H6>
+        {checkboxLabelTextComponent}
       </View>
     </Pressable>
   );

package/src/components/featureInfo/FeatureInfo.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { GestureResponderEvent, View } from "react-native";
+import { IOStyles } from "../../core";
+import {
+  HSpacer,
+  IOIconSizeScale,
+  IOIcons,
+  IOPictogramSizeScale,
+  IOPictograms,
+  Icon,
+  LabelLink,
+  LabelSmall,
+  Pictogram,
+  VSpacer
+} from "../../components";
+
+type PartialFeatureInfo = {
+  // Necessary to render main body with different formatting
+  body?: string | React.ReactNode;
+};
+
+type FeatureInfoActionProps =
+  | {
+      actionLabel?: string;
+      actionOnPress: (event: GestureResponderEvent) => void;
+    }
+  | {
+      actionLabel?: never;
+      actionOnPress?: never;
+    };
+
+type FeatureInfoGraphicProps =
+  | { iconName?: never; pictogramName: IOPictograms }
+  | { iconName: IOIcons; pictogramName?: never };
+
+type FeatureInfo = FeatureInfoGraphicProps &
+  PartialFeatureInfo &
+  FeatureInfoActionProps;
+
+const DEFAULT_ICON_SIZE: IOIconSizeScale = 24;
+const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
+
+const renderNode = (body: FeatureInfo["body"]) => {
+  if (typeof body === "string") {
+    return (
+      <LabelSmall weight="Regular" color="grey-700" testID="infoScreenBody">
+        {body}
+      </LabelSmall>
+    );
+  }
+
+  return body;
+};
+
+export const FeatureInfo = ({
+  iconName,
+  pictogramName,
+  body,
+  actionLabel,
+  actionOnPress
+}: FeatureInfo) => (
+  <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)}
+      {actionLabel && actionOnPress && (
+        <>
+          {/* Add "marginTop" equivalent if body text is present.
+          This verbose code could be deleted once we got "gap"
+          property support */}
+          {body && <VSpacer size={8} />}
+          <LabelLink fontSize="small" onPress={actionOnPress}>
+            {actionLabel}
+          </LabelLink>
+        </>
+      )}
+    </View>
+  </View>
+);

package/src/components/featureInfo/index.tsx

@@ -0,0 +1 @@
+export * from "./FeatureInfo";