@pagopa/io-app-design-system 5.3.9 → 5.4.1

package/lib/commonjs/components/buttons/IOButton/IOButton.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IOButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeHapticFeedback = _interopRequireDefault(require("react-native-haptic-feedback"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _core = require("../../../core");
+var _hooks = require("../../../hooks");
+var _icons = require("../../icons");
+var _loadingSpinner = require("../../loadingSpinner");
+var _typography = require("../../typography");
+var _ButtonText = require("../../typography/ButtonText");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const IOButton = exports.IOButton = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant = "solid",
+  color = "primary",
+  label,
+  fullWidth = false,
+  disabled = false,
+  loading = false,
+  numberOfLines = 1,
+  textAlign = "auto",
+  icon,
+  iconPosition = "start",
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = "button",
+  testID
+}, ref) => {
+  const mapColorStates = (0, _styles.useButtonColorMap)(variant);
+  const {
+    progress,
+    onPressIn,
+    onPressOut,
+    scaleAnimatedStyle
+  } = (0, _hooks.useScaleAnimation)();
+  const {
+    buttonAnimatedStyle,
+    labelAnimatedStyle,
+    iconColorAnimatedStyle
+  } = (0, _styles.useButtonAnimatedStyles)(variant, color, progress);
+  const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
+  const {
+    newTypefaceEnabled
+  } = (0, _core.useIONewTypeface)();
+  const isLinkButton = variant === "link";
+
+  // ---------------------------------------
+  // VISUAL ATTRIBUTES
+  // ---------------------------------------
+  const btnIconSizeMap = {
+    solid: 20,
+    outline: 20,
+    link: 24
+  };
+  const btnBorderWidthMap = {
+    solid: 0,
+    outline: 2,
+    link: 0
+  };
+  const btnPaddingHorizontalMap = {
+    default: 24,
+    fullWidth: 16,
+    link: 0
+  };
+  const btnLinkHitSlop = {
+    top: 14,
+    right: 24,
+    bottom: 14,
+    left: 24
+  };
+  const btnIconSize = btnIconSizeMap[variant];
+  const btnBorderWidth = btnBorderWidthMap[variant];
+  const btnBorderRadius = 8;
+  const btnSizeDefault = 48;
+  const ICON_MARGIN = 8;
+  const DISABLED_OPACITY = 0.5;
+
+  // Background color
+  const backgroundColor = disabled ? mapColorStates[color].background.disabled : mapColorStates[color].background.default;
+
+  // Label & Icons colors
+  const foregroundColor = disabled ? mapColorStates[color]?.foreground?.disabled : mapColorStates[color]?.foreground?.default;
+
+  // ---------------------------------------
+  // BUTTON INNER LOGIC
+  // ---------------------------------------
+
+  /* Prevent the component from triggering the `isEntering' transition
+       on the on the first render. Solution from this discussion:
+       https://github.com/software-mansion/react-native-reanimated/discussions/2513
+    */
+  const isMounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isMounted.current = true;
+  }, []);
+  const handleOnPress = (0, _react.useCallback)(event => {
+    /* Don't call `onPress` if the button is
+      in loading state */
+    if (loading) {
+      return;
+    }
+    _reactNativeHapticFeedback.default.trigger("impactLight");
+    onPress(event);
+  }, [loading, onPress]);
+
+  // ---------------------------------------
+  // BUTTON INNER CONTENT
+  // ---------------------------------------
+  const renderButtonContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: styles.buttonInner,
+      entering: isMounted.current ? _core.enterTransitionInnerContentSmall : undefined,
+      exiting: _core.exitTransitionInnerContent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingSpinner.LoadingSpinner, {
+        color: foregroundColor
+      })
+    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+      style: [styles.buttonInner, {
+        columnGap: ICON_MARGIN
+      }, iconPosition === "end" && {
+        flexDirection: "row-reverse"
+      }],
+      entering: isMounted.current ? _core.enterTransitionInnerContent : undefined,
+      children: [icon && (!disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIconWithColorTransition, {
+        allowFontScaling: true,
+        name: icon,
+        animatedProps: iconColorAnimatedStyle,
+        size: btnIconSize
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIcon, {
+        allowFontScaling: true,
+        name: icon,
+        color: mapColorStates[color]?.foreground?.disabled,
+        size: btnIconSize
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.AnimatedIOText, {
+        font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+        weight: "Semibold",
+        size: _ButtonText.buttonTextFontSize,
+        lineHeight: isLinkButton ? _ButtonText.buttonTextLineHeight : undefined,
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        numberOfLines: numberOfLines,
+        ellipsizeMode: "tail",
+        style: [{
+          textAlign
+        }, disabled ? {
+          color: mapColorStates[color]?.foreground?.disabled
+        } : {
+          ...labelAnimatedStyle
+        }],
+        children: label
+      })]
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    accessible: true
+    // Using || operator because empty string is not an accepted value
+    ,
+    accessibilityLabel: accessibilityLabel || label,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: {
+      busy: loading,
+      disabled: disabled || false
+    },
+    onPress: handleOnPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    disabled: disabled,
+    hitSlop: isLinkButton ? btnLinkHitSlop : undefined,
+    style: isLinkButton ? {
+      alignSelf: "flex-start"
+    } : fullWidth ? {
+      flexShrink: 0,
+      alignSelf: "stretch"
+    } : {
+      flexShrink: 1,
+      alignSelf: "auto"
+    },
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.button, {
+        paddingHorizontal: isLinkButton ? btnPaddingHorizontalMap.link : fullWidth ? btnPaddingHorizontalMap.fullWidth : btnPaddingHorizontalMap.default
+      }, {
+        height: isLinkButton ? undefined : btnSizeDefault,
+        backgroundColor,
+        borderWidth: btnBorderWidth,
+        borderRadius: btnBorderRadius,
+        borderColor: foregroundColor
+      }, disabled ? {
+        opacity: DISABLED_OPACITY
+      } : {},
+      /* Prevent Reanimated from overriding background colors
+          if button is disabled */
+      !disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle],
+      children: renderButtonContent()
+    })
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center",
+    // Prop supported on Android only
+    borderCurve: "continuous",
+    overflow: "hidden",
+    elevation: 0
+  },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+var _default = exports.default = IOButton;
+//# sourceMappingURL=IOButton.js.map

package/lib/commonjs/components/buttons/IOButton/IOButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeHapticFeedback","_interopRequireDefault","_reactNativeReanimated","_core","_hooks","_icons","_loadingSpinner","_typography","_ButtonText","_styles","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","IOButton","exports","forwardRef","variant","color","label","fullWidth","disabled","loading","numberOfLines","textAlign","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","accessibilityRole","testID","ref","mapColorStates","useButtonColorMap","progress","onPressIn","onPressOut","scaleAnimatedStyle","useScaleAnimation","buttonAnimatedStyle","labelAnimatedStyle","iconColorAnimatedStyle","useButtonAnimatedStyles","reducedMotion","useReducedMotion","newTypefaceEnabled","useIONewTypeface","isLinkButton","btnIconSizeMap","solid","outline","link","btnBorderWidthMap","btnPaddingHorizontalMap","btnLinkHitSlop","top","right","bottom","left","btnIconSize","btnBorderWidth","btnBorderRadius","btnSizeDefault","ICON_MARGIN","DISABLED_OPACITY","backgroundColor","background","foregroundColor","foreground","isMounted","useRef","useEffect","current","handleOnPress","useCallback","event","ReactNativeHapticFeedback","trigger","renderButtonContent","jsxs","Fragment","children","jsx","View","style","styles","buttonInner","entering","enterTransitionInnerContentSmall","undefined","exiting","exitTransitionInnerContent","LoadingSpinner","columnGap","flexDirection","enterTransitionInnerContent","AnimatedIconWithColorTransition","allowFontScaling","name","animatedProps","size","AnimatedIcon","AnimatedIOText","font","weight","buttonTextFontSize","lineHeight","buttonTextLineHeight","accessible","accessibilityElementsHidden","importantForAccessibility","ellipsizeMode","Pressable","accessibilityState","busy","hitSlop","alignSelf","flexShrink","button","paddingHorizontal","height","borderWidth","borderRadius","borderColor","opacity","StyleSheet","create","alignItems","justifyContent","textAlignVertical","borderCurve","overflow","elevation","_default"],"sourceRoot":"../../../../../src","sources":["components/buttons/IOButton/IOButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/buttons/IOButton/__test__/IOButton.test.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var TestRenderer = _interopRequireWildcard(require("react-test-renderer"));
+var _IOButton = _interopRequireDefault(require("../IOButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onButtonPress = () => {
+  _reactNative.Alert.alert("Alert", "Action triggered");
+};
+describe("Test Buttons Components", () => {
+  it("IOButton Snapshot · Solid variant", () => {
+    const buttonSolid = TestRenderer.create(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IOButton.default, {
+      variant: "solid",
+      label: "label",
+      accessibilityLabel: "accessibilityLabel",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonSolid).toMatchSnapshot();
+  });
+  it("IOButton Snapshot · Link variant", () => {
+    const buttonLink = TestRenderer.create(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IOButton.default, {
+      variant: "link",
+      label: "label",
+      accessibilityLabel: "accessibilityLabel",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonLink).toMatchSnapshot();
+  });
+  it("IOButton Snapshot · Outline variant", () => {
+    const buttonOutline = TestRenderer.create(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IOButton.default, {
+      variant: "outline",
+      label: "label",
+      accessibilityLabel: "accessibilityLabel",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonOutline).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=IOButton.test.js.map

package/lib/commonjs/components/buttons/IOButton/__test__/IOButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","TestRenderer","_interopRequireWildcard","_IOButton","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","onButtonPress","Alert","alert","describe","it","buttonSolid","create","jsx","variant","label","accessibilityLabel","onPress","toJSON","expect","toMatchSnapshot","buttonLink","buttonOutline"],"sourceRoot":"../../../../../../src","sources":["components/buttons/IOButton/__test__/IOButton.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap

@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "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]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 0,
+        },
+        {
+          "backgroundColor": "transparent",
+          "borderColor": "#0B3EE3",
+          "borderRadius": 8,
+          "borderWidth": 0,
+          "height": undefined,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {},
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 20,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "auto",
+      "flexShrink": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        {
+          "backgroundColor": "rgba(9,50,182,0)",
+          "borderColor": "#0B3EE3",
+          "borderRadius": 8,
+          "borderWidth": 2,
+          "height": 48,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": undefined,
+          "borderColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": undefined,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "auto",
+      "flexShrink": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        {
+          "backgroundColor": "#0B3EE3",
+          "borderColor": "#FFFFFF",
+          "borderRadius": 8,
+          "borderWidth": 0,
+          "height": 48,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": undefined,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;