@pagopa/io-app-design-system 5.11.13-0 → 5.11.14

package/lib/typescript/components/buttons/ButtonSolid.d.ts

@@ -1,52 +0,0 @@
-import React, { ComponentProps } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
-import { WithTestID } from "../../utils/types";
-import { IOIcons } from "../icons";
-export type ButtonSolidColor = "primary" | "danger" | "contrast";
-export type ButtonSolidProps = WithTestID<{
-    /**
-     * @default primary
-     */
-    color?: ButtonSolidColor;
-    label: string;
-    /**
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * @default false
-     */
-    loading?: boolean;
-    icon?: IOIcons;
-    /**
-     * @default start
-     */
-    iconPosition?: "start" | "end";
-    onPress: (event: GestureResponderEvent) => void;
-} & Pick<ComponentProps<typeof Pressable>, "disabled" | "accessibilityLabel" | "accessibilityHint">>;
-/**
- * @deprecated Use `Button` with variant `solid` instead
- */
-export declare const ButtonSolid: React.ForwardRefExoticComponent<{
-    /**
-     * @default primary
-     */
-    color?: ButtonSolidColor;
-    label: string;
-    /**
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * @default false
-     */
-    loading?: boolean;
-    icon?: IOIcons;
-    /**
-     * @default start
-     */
-    iconPosition?: "start" | "end";
-    onPress: (event: GestureResponderEvent) => void;
-} & Pick<import("react-native").PressableProps & React.RefAttributes<View>, "accessibilityLabel" | "accessibilityHint" | "disabled"> & import("../../utils/types").TestID & React.RefAttributes<View>>;
-export default ButtonSolid;
-//# sourceMappingURL=ButtonSolid.d.ts.map

package/lib/typescript/components/buttons/ButtonSolid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonSolid.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/ButtonSolid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,qBAAqB,EACrB,SAAS,EACT,IAAI,EACL,MAAM,cAAc,CAAC;AAgBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAI1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAoBjE,MAAM,MAAM,gBAAgB,GAAG,UAAU,CACvC;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,SAAS,CAAC,EAChC,UAAU,GAAG,oBAAoB,GAAG,mBAAmB,CACxD,CACF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW;IA5BpB;;OAEG;YACK,gBAAgB;WACjB,MAAM;IACb;;OAEG;gBACS,OAAO;IACnB;;OAEG;cACO,OAAO;WACV,OAAO;IACd;;OAEG;mBACY,OAAO,GAAG,KAAK;aACrB,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;sMAiNlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/src/components/buttons/ButtonLink.tsx

@@ -1,222 +0,0 @@
-import React, { forwardRef } from "react";
-import {
-  AccessibilityRole,
-  GestureResponderEvent,
-  Pressable,
-  TextStyle,
-  View
-} from "react-native";
-import Animated, {
-  interpolateColor,
-  useAnimatedProps,
-  useAnimatedStyle,
-  useReducedMotion
-} from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import {
-  IOButtonStyles,
-  IOColors,
-  IOSpacingScale,
-  hexToRgba
-} from "../../core";
-import { useScaleAnimation } from "../../hooks";
-import { WithTestID } from "../../utils/types";
-import {
-  AnimatedIcon,
-  AnimatedIconWithColorTransition,
-  IOIconSizeScale,
-  IOIcons
-} from "../icons";
-import {
-  IOText,
-  buttonTextFontSize,
-  buttonTextLineHeight
-} from "../typography";
-
-export type ColorButtonLink = "primary" | "contrast";
-
-export type ButtonLinkProps = WithTestID<{
-  color?: ColorButtonLink;
-  label: string;
-  disabled?: boolean;
-  // Icons
-  icon?: IOIcons;
-  iconPosition?: "start" | "end";
-  // Accessibility
-  accessibilityLabel?: string;
-  accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
-  accessibilityHint?: string;
-  numberOfLines?: number;
-  textAlign?: TextStyle["textAlign"];
-  // Events
-  onPress: (event: GestureResponderEvent) => void;
-}>;
-
-type ColorStates = {
-  foreground: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-};
-
-const DISABLED_OPACITY = 0.5;
-const ICON_MARGIN = 8;
-
-/**
- * @deprecated Use `Button` with variant `link` instead
- */
-export const ButtonLink = forwardRef<View, ButtonLinkProps>(
-  (
-    {
-      color = "primary",
-      label,
-      disabled = false,
-      icon,
-      iconPosition = "start",
-      onPress,
-      accessibilityLabel,
-      accessibilityRole = "button",
-      accessibilityHint,
-      numberOfLines = 1,
-      textAlign = "auto",
-      testID
-    },
-    ref
-  ) => {
-    const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
-    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation();
-    const reducedMotion = useReducedMotion();
-
-    const mapColorStates: Record<
-      NonNullable<ButtonLinkProps["color"]>,
-      ColorStates
-    > = {
-      // Primary button
-      primary: {
-        foreground: {
-          default: IOColors[theme["interactiveElem-default"]],
-          pressed: IOColors[theme["interactiveElem-pressed"]],
-          disabled: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.85)
-        }
-      },
-      contrast: {
-        foreground: {
-          default: IOColors.white,
-          pressed: hexToRgba(IOColors.white, 0.85),
-          disabled: hexToRgba(IOColors.white, 0.5)
-        }
-      }
-    };
-
-    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
-
-    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-
-      const labelColor = interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      );
-
-      return {
-        color: labelColor
-      };
-    });
-
-    // Animate the <Icon> color prop
-    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-      const iconColor = interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      );
-
-      return { color: iconColor };
-    });
-
-    // Icon size
-    const iconSize: IOIconSizeScale = 24;
-    const iconMargin: IOSpacingScale = 8;
-
-    return (
-      <Pressable
-        ref={ref}
-        accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
-        testID={testID}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onTouchEnd={onPressOut}
-        accessible={true}
-        disabled={disabled}
-        hitSlop={{ top: 14, right: 24, bottom: 14, left: 24 }}
-        style={{ alignSelf: "flex-start" }}
-      >
-        <Animated.View
-          style={[
-            IOButtonStyles.buttonLink,
-            iconPosition === "end" && { flexDirection: "row-reverse" },
-            { columnGap: iconMargin },
-            disabled ? { opacity: DISABLED_OPACITY } : {},
-            { columnGap: ICON_MARGIN },
-            /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
-            !disabled && !reducedMotion && scaleAnimatedStyle
-          ]}
-        >
-          {icon &&
-            (!disabled ? (
-              <AnimatedIconWithColorTransition
-                allowFontScaling
-                name={icon}
-                animatedProps={pressedColorIconAnimationStyle}
-                color={mapColorStates[color]?.foreground?.default}
-                size={iconSize}
-              />
-            ) : (
-              <AnimatedIcon
-                allowFontScaling
-                name={icon}
-                color={mapColorStates[color]?.foreground?.disabled}
-                size={iconSize}
-              />
-            ))}
-          <AnimatedIOText
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
-            weight={"Semibold"}
-            size={buttonTextFontSize}
-            lineHeight={buttonTextLineHeight}
-            style={[
-              disabled
-                ? { color: mapColorStates[color]?.foreground?.disabled }
-                : { ...pressedColorLabelAnimationStyle },
-              { textAlign }
-            ]}
-            numberOfLines={numberOfLines}
-            ellipsizeMode="tail"
-          >
-            {label}
-          </AnimatedIOText>
-        </Animated.View>
-      </Pressable>
-    );
-  }
-);
-
-export default ButtonLink;

package/src/components/buttons/ButtonOutline.tsx

@@ -1,261 +0,0 @@
-import React, { ComponentProps, forwardRef } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  interpolateColor,
-  useAnimatedProps,
-  useAnimatedStyle,
-  useReducedMotion
-} from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOButtonStyles, IOColors, hexToRgba } from "../../core/";
-import { useScaleAnimation } from "../../hooks";
-import { WithTestID } from "../../utils/types";
-import {
-  AnimatedIcon,
-  AnimatedIconWithColorTransition,
-  IOIconSizeScale,
-  IOIcons
-} from "../icons";
-import { IOText, buttonTextFontSize } from "../typography";
-
-type ColorButtonOutline = "primary" | "contrast";
-export type ButtonOutline = WithTestID<
-  {
-    color?: ColorButtonOutline;
-    label: string;
-    fullWidth?: boolean;
-    // Icons
-    icon?: IOIcons;
-    iconPosition?: "start" | "end";
-    // Events
-    onPress: (event: GestureResponderEvent) => void;
-  } & Pick<
-    ComponentProps<typeof Pressable>,
-    "disabled" | "accessibilityLabel" | "accessibilityHint"
-  >
->;
-
-type ColorStates = {
-  background: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-  foreground: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-};
-
-// Icon size
-const iconSize: IOIconSizeScale = 20;
-
-const DISABLED_OPACITY = 0.5;
-const ICON_MARGIN = 8;
-
-const IOButtonStylesLocal = StyleSheet.create({
-  buttonWithBorder: {
-    borderWidth: 2
-  }
-});
-
-/**
- * @deprecated Use `Button` with variant `outline` instead
- */
-export const ButtonOutline = forwardRef<View, ButtonOutline>(
-  (
-    {
-      color = "primary",
-      label,
-      fullWidth = false,
-      disabled = false,
-      icon,
-      iconPosition = "start",
-      onPress,
-      accessibilityLabel,
-      accessibilityHint,
-      testID
-    },
-    ref
-  ) => {
-    const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
-    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation();
-    const reducedMotion = useReducedMotion();
-
-    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
-
-    const mapColorStates: Record<
-      NonNullable<ButtonOutline["color"]>,
-      ColorStates
-    > = {
-      // Primary button
-      primary: {
-        background: {
-          default: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0),
-          pressed: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0.1),
-          disabled: "transparent"
-        },
-        foreground: {
-          default: IOColors[theme["interactiveElem-default"]],
-          pressed: IOColors[theme["interactiveElem-pressed"]],
-          disabled: IOColors[theme["interactiveOutline-disabled"]]
-        }
-      },
-      // Contrast button
-      contrast: {
-        background: {
-          default: hexToRgba(IOColors["blueIO-600"], 0),
-          pressed: hexToRgba(IOColors["blueIO-600"], 0.5),
-          disabled: "transparent"
-        },
-        foreground: {
-          default: IOColors.white,
-          pressed: IOColors.white,
-          disabled: IOColors["blueIO-200"]
-        }
-      }
-    };
-
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-      const backgroundColor = interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].background.default,
-          mapColorStates[color].background.pressed
-        ]
-      );
-
-      const borderColor = interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      );
-
-      return {
-        borderColor,
-        backgroundColor
-      };
-    });
-
-    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => ({
-      color: interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      )
-    }));
-
-    // Animate the <Icon> color prop
-    const pressedColorIconAnimationStyle = useAnimatedProps(() => ({
-      color: interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      )
-    }));
-
-    return (
-      <Pressable
-        ref={ref}
-        accessible={true}
-        accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole={"button"}
-        accessibilityState={{ disabled: disabled || false }}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        style={
-          fullWidth
-            ? { flexShrink: 0, alignSelf: "stretch" }
-            : { flexShrink: 1, alignSelf: "auto" }
-        }
-        testID={testID}
-      >
-        <Animated.View
-          style={[
-            IOButtonStyles.button,
-            IOButtonStyles.buttonSizeDefault,
-            IOButtonStylesLocal.buttonWithBorder,
-            fullWidth && { paddingHorizontal: 16 },
-            { columnGap: ICON_MARGIN },
-            iconPosition === "end" && { flexDirection: "row-reverse" },
-            disabled
-              ? {
-                  backgroundColor: mapColorStates[color]?.background?.disabled,
-                  borderColor: mapColorStates[color]?.foreground?.disabled,
-                  opacity: DISABLED_OPACITY
-                }
-              : {
-                  backgroundColor: mapColorStates[color]?.background?.default,
-                  borderColor: mapColorStates[color]?.foreground.default
-                },
-            /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
-            !reducedMotion && !disabled && scaleAnimatedStyle,
-            !disabled && pressedAnimationStyle
-          ]}
-        >
-          {icon &&
-            (!disabled ? (
-              <AnimatedIconWithColorTransition
-                allowFontScaling
-                name={icon}
-                animatedProps={pressedColorIconAnimationStyle}
-                color={mapColorStates[color]?.foreground?.default}
-                size={iconSize}
-              />
-            ) : (
-              <AnimatedIcon
-                allowFontScaling
-                name={icon}
-                color={mapColorStates[color]?.foreground?.disabled}
-                size={iconSize}
-              />
-            ))}
-          <AnimatedIOText
-            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
-            weight={"Semibold"}
-            size={buttonTextFontSize}
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={[
-              { alignSelf: "center" },
-              disabled
-                ? { color: mapColorStates[color]?.foreground?.disabled }
-                : { ...pressedColorLabelAnimationStyle }
-            ]}
-          >
-            {label}
-          </AnimatedIOText>
-        </Animated.View>
-      </Pressable>
-    );
-  }
-);
-
-export default ButtonOutline;