@pagopa/io-app-design-system 1.2.0 → 1.3.1

package/src/components/buttons/ButtonSolid.tsx

@@ -1,17 +1,13 @@
 import React, { useCallback } from "react";
-import {
-    GestureResponderEvent,
-    Pressable,
-    StyleSheet
-} from "react-native";
+import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
@@ -24,68 +20,72 @@ import { BaseTypography } from "../typography/BaseTypography";
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
-    default: string;
-    pressed: string;
-    label: {
-        default: IOColors;
-        disabled: IOColors;
-    };
+  default: string;
+  pressed: string;
+  label: {
+    default: IOColors;
+    disabled: IOColors;
+  };
 };
 
 const colorPrimaryButtonDisabled: IOColors = "grey-200";
 const DISABLED_OPACITY = 0.5;
 
 const styles = StyleSheet.create({
-    backgroundDisabled: {
-        backgroundColor: IOColors[colorPrimaryButtonDisabled],
-        opacity: DISABLED_OPACITY
-    }
+  backgroundDisabled: {
+    backgroundColor: IOColors[colorPrimaryButtonDisabled],
+    opacity: DISABLED_OPACITY
+  }
 });
 
 export type ButtonSolidProps = WithTestID<{
-    color?: ButtonSolidColor;
-    label: string;
-    small?: boolean;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    icon?: IOIcons;
-    iconPosition?: "start" | "end";
-    accessibilityLabel: string;
-    accessibilityHint?: string;
-    onPress: (event: GestureResponderEvent) => void;
+  color?: ButtonSolidColor;
+  label: string;
+  small?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  icon?: IOIcons;
+  iconPosition?: "start" | "end";
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  onPress: (event: GestureResponderEvent) => void;
 }>;
 
-const mapColorStates: Record<NonNullable<ButtonSolidProps["color"]>, ColorStates> = {
-    // Primary button
-    primary: {
-        default: IOColors["blueIO-500"],
-        pressed: IOColors["blueIO-600"],
-        label: {
-            default: "white",
-            disabled: "grey-700"
-        }
-    },
-    // Danger button
-    danger: {
-        default: IOColors["error-850"],
-        pressed: IOColors["error-600"],
-        label: {
-            default: "white",
-            disabled: "grey-700"
-        }
-    },
-    // Contrast button
-    contrast: {
-        default: IOColors.white,
-        pressed: IOColors["blueIO-50"],
-        label: {
-            default: "blueIO-500",
-            disabled: "grey-700"
-        }
+const mapColorStates: Record<
+  NonNullable<ButtonSolidProps["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    default: IOColors["blueIO-500"],
+    pressed: IOColors["blueIO-600"],
+    label: {
+      default: "white",
+      disabled: "grey-700"
+    }
+  },
+  // Danger button
+  danger: {
+    default: IOColors["error-850"],
+    pressed: IOColors["error-600"],
+    label: {
+      default: "white",
+      disabled: "grey-700"
     }
+  },
+  // Contrast button
+  contrast: {
+    default: IOColors.white,
+    pressed: IOColors["blueIO-50"],
+    label: {
+      default: "blueIO-500",
+      disabled: "grey-700"
+    }
+  }
 };
 
-export const ButtonSolid = React.memo(({
+export const ButtonSolid = React.memo(
+  ({
     color = "primary",
     label,
     small = false,
@@ -97,7 +97,7 @@ export const ButtonSolid = React.memo(({
     accessibilityLabel,
     accessibilityHint,
     testID
-}: ButtonSolidProps) => {
+  }: ButtonSolidProps) => {
     const isPressed = useSharedValue(0);
 
     // Scaling transformation applied when the button is pressed
@@ -105,110 +105,111 @@ export const ButtonSolid = React.memo(({
 
     // Using a spring-based animation for our interpolations
     const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
+      withSpring(isPressed.value, IOSpringValues.button)
     );
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
-        // Link color states to the pressed states
-        const bgColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapColorStates[color].default, mapColorStates[color].pressed]
-        );
-
-        // Scale down button slightly when pressed
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
-
-        return {
-            backgroundColor: bgColor,
-            transform: [{ scale }]
-        };
+      // Link color states to the pressed states
+      const bgColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [mapColorStates[color].default, mapColorStates[color].pressed]
+      );
+
+      // Scale down button slightly when pressed
+      const scale = interpolate(
+        progressPressed.value,
+        [0, 1],
+        [1, animationScaleValue],
+        Extrapolate.CLAMP
+      );
+
+      return {
+        backgroundColor: bgColor,
+        transform: [{ scale }]
+      };
     });
 
     const onPressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 1;
     }, [isPressed]);
     const onPressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 0;
     }, [isPressed]);
 
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-        ? mapColorStates[color]?.label?.disabled
-        : mapColorStates[color]?.label?.default;
+      ? mapColorStates[color]?.label?.disabled
+      : mapColorStates[color]?.label?.default;
 
     // Icon size
     const iconSize = small ? 16 : 20;
 
     const Button = () => (
-        <Pressable
-            accessibilityLabel={accessibilityLabel}
-            accessibilityHint={accessibilityHint}
-            accessibilityRole={"button"}
-            testID={testID}
-            onPress={onPress}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            accessible={true}
-            disabled={disabled}
-            style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
-        >
-            <Animated.View
-                style={[
-                    IOButtonStyles.button,
-                    iconPosition === "end" && { flexDirection: "row-reverse" },
-                    small
-                        ? IOButtonStyles.buttonSizeSmall
-                        : IOButtonStyles.buttonSizeDefault,
-                    disabled
-                        ? styles.backgroundDisabled
-                        : { backgroundColor: mapColorStates[color]?.default },
-                    /* Prevent Reanimated from overriding background colors
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={"button"}
+        testID={testID}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessible={true}
+        disabled={disabled}
+        style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
+      >
+        <Animated.View
+          style={[
+            IOButtonStyles.button,
+            iconPosition === "end" && { flexDirection: "row-reverse" },
+            small
+              ? IOButtonStyles.buttonSizeSmall
+              : IOButtonStyles.buttonSizeDefault,
+            disabled
+              ? styles.backgroundDisabled
+              : { backgroundColor: mapColorStates[color]?.default },
+            /* Prevent Reanimated from overriding background colors
                     if button is disabled */
-                    !disabled && pressedAnimationStyle
-                ]}
-            >
-                {icon && (
-                    <>
-                        {/* If 'iconPosition' is set to 'end', we use 
+            !disabled && pressedAnimationStyle
+          ]}
+        >
+          {icon && (
+            <>
+              {/* If 'iconPosition' is set to 'end', we use 
             reverse flex property to invert the position */}
-                        <Icon name={icon} size={iconSize} color={foregroundColor} />
-                        {/* Once we have support for 'gap' property,
+              <Icon name={icon} size={iconSize} color={foregroundColor} />
+              {/* Once we have support for 'gap' property,
             we can get rid of that spacer */}
-                        <HSpacer size={8} />
-                    </>
-                )}
-                <BaseTypography
-                    font="ReadexPro"
-                    weight={"Regular"}
-                    color={foregroundColor}
-                    style={[
-                        IOButtonStyles.label,
-                        small
-                            ? IOButtonStyles.labelSizeSmall
-                            : IOButtonStyles.labelSizeDefault
-                    ]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                /* A11y-related props:
+              <HSpacer size={8} />
+            </>
+          )}
+          <BaseTypography
+            font="ReadexPro"
+            weight={"Regular"}
+            color={foregroundColor}
+            style={[
+              IOButtonStyles.label,
+              small
+                ? IOButtonStyles.labelSizeSmall
+                : IOButtonStyles.labelSizeDefault
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            /* A11y-related props:
                 DON'T UNCOMMENT THEM */
-                /* allowFontScaling
+            /* allowFontScaling
                 maxFontSizeMultiplier={1.3} */
-                >
-                    {label}
-                </BaseTypography>
-            </Animated.View>
-        </Pressable>
+          >
+            {label}
+          </BaseTypography>
+        </Animated.View>
+      </Pressable>
     );
     return <Button />;
-});
+  }
+);
 
 export default ButtonSolid;

package/src/components/buttons/IconButtonContained.tsx

@@ -2,28 +2,28 @@ import * as React from "react";
 import { useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedProps,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import { WithTestID } from "src/utils/types";
 import {
-    AnimatedIcon,
-    IOIcons,
-    IconClassComponent
+  AnimatedIcon,
+  IOIcons,
+  IconClassComponent
 } from "../../components/icons";
 import {
-    IOButtonStyles,
-    IOColors,
-    IOIconButtonStyles,
-    IOScaleValues,
-    IOSpringValues,
-    hexToRgba
+  IOButtonStyles,
+  IOColors,
+  IOIconButtonStyles,
+  IOScaleValues,
+  IOSpringValues,
+  hexToRgba
 } from "../../core";
 
 export type IconButtonContained = WithTestID<{

package/src/components/buttons/IconButtonSolid.tsx

@@ -2,19 +2,19 @@ import * as React from "react";
 import { useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import {
-    IOButtonStyles,
-    IOIconButtonStyles,
-    IOScaleValues,
-    IOSpringValues
+  IOButtonStyles,
+  IOIconButtonStyles,
+  IOScaleValues,
+  IOSpringValues
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";

package/src/components/contentWrapper/ContentWrapper.tsx

@@ -4,8 +4,8 @@ import type { IOAppMargin } from "../../core";
 import { IOVisualCostants } from "../../core/IOStyles";
 
 type IOContentWrapperProps = {
-    margin?: IOAppMargin;
-    children: React.ReactNode;
+  margin?: IOAppMargin;
+  children: React.ReactNode;
 };
 
 /**
@@ -14,14 +14,14 @@ depending on the size value
 @param {IOContentWrapper} margin
  */
 export const ContentWrapper = ({
-    margin = IOVisualCostants.appMarginDefault,
-    children
+  margin = IOVisualCostants.appMarginDefault,
+  children
 }: IOContentWrapperProps) => (
-    <View
-        style={{
-            paddingHorizontal: margin
-        }}
-    >
-        {children}
-    </View>
-);
+  <View
+    style={{
+      paddingHorizontal: margin
+    }}
+  >
+    {children}
+  </View>
+);

package/src/components/contentWrapper/index.tsx

@@ -1 +1 @@
-export * from "./ContentWrapper";
+export * from "./ContentWrapper";

package/src/components/divider/index.tsx

@@ -1 +1 @@
-export * from "./Divider";
+export * from "./Divider";

package/src/components/icons/index.tsx

@@ -1 +1 @@
-export * from "./Icon";
+export * from "./Icon";