@pagopa/io-app-design-system 1.12.0 → 1.13.0

package/lib/typescript/core/IOTransitions.d.ts

@@ -0,0 +1,58 @@
+/**
+A custom enter transition designed for the average size
+inner content of a button or module (e.g. text).
+The scaling effect is slight.
+*/
+export declare const enterTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom enter transition designed for the small size
+inner content of a button or module (e.g. loading spinner).
+The scaling effect is accentuated.
+*/
+export declare const enterTransitionInnerContentSmall: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom exit transition designed for both small
+and average size inner content of a button or module.
+The scaling effect is slight.
+*/
+export declare const exitTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 0;
+        transform: {
+            scale: 0.9;
+        }[];
+    };
+};
+//# sourceMappingURL=IOTransitions.d.ts.map

package/lib/typescript/core/IOTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IOTransitions.d.ts","sourceRoot":"","sources":["../../../src/core/IOTransitions.ts"],"names":[],"mappings":"AAEA;;;;EAIE;AACF,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;CAwBvC,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;CAwB5C,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;CAwBtC,CAAC"}

package/lib/typescript/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./IOColors";
 export * from "./IOAnimations";
+export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";

package/lib/typescript/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}

package/lib/typescript/stories/ButtonDS.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
+    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, loading, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
     parameters: {
         layout: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/buttons/ButtonSolid.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
@@ -19,8 +20,12 @@ import {
   IOColors,
   IOScaleValues,
   IOSpringValues,
+  enterTransitionInnerContent,
+  enterTransitionInnerContentSmall,
+  exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -65,6 +70,10 @@ export type ButtonSolidProps = WithTestID<{
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * @default false
+   */
+  loading?: boolean;
   /**
    * @default false
    */
@@ -152,6 +161,7 @@ export const ButtonSolid = React.memo(
     label,
     fullWidth = false,
     disabled = false,
+    loading = false,
     icon,
     iconPosition = "start",
     onPress,
@@ -211,6 +221,19 @@ export const ButtonSolid = React.memo(
       isPressed.value = 0;
     }, [isPressed]);
 
+    const handleOnPress = useCallback(
+      (event: GestureResponderEvent) => {
+        /* Don't call `onPress` if the button is
+        in loading state */
+        if (loading) {
+          return;
+        }
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      },
+      [loading, onPress]
+    );
+
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
       ? colorMap[color]?.label?.disabled
@@ -218,22 +241,23 @@ export const ButtonSolid = React.memo(
 
     return (
       <Pressable
+        testID={testID}
+        accessible={true}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityState={{ busy: loading }}
         accessibilityRole={"button"}
-        testID={testID}
-        onPress={onPress}
+        onPress={handleOnPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-        accessible={true}
         disabled={disabled}
         style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
       >
         <Animated.View
           style={[
             buttonStyles.button,
+            { overflow: "hidden" },
             isExperimental && fullWidth && { paddingHorizontal: 16 },
-            iconPosition === "end" && { flexDirection: "row-reverse" },
             buttonStyles.buttonSizeDefault,
             disabled
               ? isExperimental
@@ -241,30 +265,51 @@ export const ButtonSolid = React.memo(
                 : legacyStyles.backgroundDisabled
               : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
+              if button is disabled */
             !disabled && pressedAnimationStyle
           ]}
         >
-          {icon && (
-            <>
-              {/* If 'iconPosition' is set to 'end', we use 
+          {loading && (
+            <Animated.View
+              style={buttonStyles.buttonInner}
+              entering={enterTransitionInnerContentSmall}
+              exiting={exitTransitionInnerContent}
+            >
+              <LoadingSpinner color={foregroundColor} />
+            </Animated.View>
+          )}
+
+          {!loading && (
+            <Animated.View
+              style={[
+                buttonStyles.buttonInner,
+                iconPosition === "end" && { flexDirection: "row-reverse" }
+              ]}
+              entering={enterTransitionInnerContent}
+              exiting={exitTransitionInnerContent}
+            >
+              {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} />
-            </>
+                  <HSpacer size={8} />
+                </>
+              )}
+              <ButtonText
+                color={foregroundColor}
+                style={IOButtonStyles.label}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                allowFontScaling={isExperimental}
+                maxFontSizeMultiplier={1.3}
+              >
+                {label}
+              </ButtonText>
+            </Animated.View>
           )}
-          <ButtonText
-            color={foregroundColor}
-            style={IOButtonStyles.label}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
-          >
-            {label}
-          </ButtonText>
         </Animated.View>
       </Pressable>
     );

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

@@ -371,7 +371,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   accessibilityRole="button"
   accessibilityState={
     {
-      "busy": undefined,
+      "busy": false,
       "checked": undefined,
       "disabled": false,
       "expanded": undefined,
@@ -416,7 +416,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
-        false,
+        {
+          "overflow": "hidden",
+        },
         false,
         {
           "height": 40,
@@ -435,40 +437,55 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       ]
     }
   >
-    <Text
-      allowFontScaling={false}
-      color="white"
-      defaultColor="white"
-      defaultWeight="Bold"
-      ellipsizeMode="tail"
-      font="TitilliumWeb"
-      fontStyle={
-        {
-          "fontSize": 16,
-        }
-      }
-      maxFontSizeMultiplier={1.3}
-      numberOfLines={1}
+    <View
+      entering={[Function]}
+      exiting={[Function]}
       style={
         [
           {
-            "alignSelf": "center",
-          },
-          {
-            "fontSize": 16,
-          },
-          {
-            "color": "#FFFFFF",
-            "fontFamily": "Titillium Web",
-            "fontStyle": "normal",
-            "fontWeight": "700",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
+          false,
         ]
       }
-      weight="Bold"
     >
-      label
-    </Text>
+      <Text
+        allowFontScaling={false}
+        color="white"
+        defaultColor="white"
+        defaultWeight="Bold"
+        ellipsizeMode="tail"
+        font="TitilliumWeb"
+        fontStyle={
+          {
+            "fontSize": 16,
+          }
+        }
+        maxFontSizeMultiplier={1.3}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "fontSize": 16,
+            },
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "700",
+            },
+          ]
+        }
+        weight="Bold"
+      >
+        label
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/components/index.tsx

@@ -10,6 +10,7 @@ export * from "./featureInfo";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";
+export * from "./loadingSpinner";
 export * from "./modules";
 export * from "./banner";
 export * from "./pictograms";

package/src/components/layout/BlockButtons.tsx

@@ -133,7 +133,7 @@ export const BlockButtons = (props: Props) => {
   );
 
   return (
-    <View style={{ ...IOStyles.flex, ...IOStyles.row }}>
+    <View style={IOStyles.row}>
       {renderLeftButton()}
       {renderMidButton()}
       {renderRightButton()}

package/src/components/layout/FooterWithButtons.tsx

@@ -4,6 +4,10 @@ import { StyleSheet, View } from "react-native";
 import { IOStyles } from "../../core";
 import { BlockButtons, BlockButtonsProps } from "./BlockButtons";
 
+type Props = BlockButtonsProps & {
+  sticky?: boolean;
+};
+
 // TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze
 const styles = StyleSheet.create({
   container: {
@@ -11,7 +15,9 @@ const styles = StyleSheet.create({
     width: "100%",
     // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction`
     marginTop: -50,
-    paddingTop: 50,
+    paddingTop: 50
+  },
+  sticky: {
     position: "absolute",
     bottom: 0
   }
@@ -21,15 +27,15 @@ const styles = StyleSheet.create({
  * Implements a component that show buttons as sticky footer
  * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
  */
-export const FooterWithButtons = (props: BlockButtonsProps) => (
+export const FooterWithButtons = ({ sticky = false, ...rest }: Props) => (
   <View
-    style={styles.container}
-    accessible={props.accessible}
+    style={{ ...styles.container, ...(sticky ? styles.sticky : {}) }}
+    accessible={rest.accessible}
     pointerEvents={"box-none"}
     testID="FooterWithButtons"
   >
     <View style={IOStyles.footer}>
-      <BlockButtons {...props} />
+      <BlockButtons {...rest} />
     </View>
   </View>
 );

package/src/components/layout/HeaderFirstLevel.tsx

@@ -79,23 +79,22 @@ export const HeaderFirstLevel = ({
           {title}
         </H3>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
-          {(type === "twoActions" || type === "threeActions") && (
+          {type === "threeActions" && (
             <>
+              <IconButton {...thirdAction} color="neutral" />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
-              +.9+
               <HSpacer size={16} />
-              <IconButton {...secondAction} color="neutral" />
             </>
           )}
-          {type === "threeActions" && (
+          {(type === "twoActions" || type === "threeActions") && (
             <>
+              <IconButton {...secondAction} color="neutral" />
               {/* Same as above */}
               <HSpacer size={16} />
-              <IconButton {...thirdAction} color="neutral" />
             </>
           )}
+          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
         </View>
       </View>
     </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -179,25 +179,25 @@ export const HeaderSecondLevel = ({
           {title}
         </Animated.Text>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {type !== "base" ? (
-            <IconButton {...firstAction} color="neutral" />
-          ) : (
-            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+          {type === "threeActions" && (
+            <>
+              <IconButton {...thirdAction} color="neutral" />
+              {/* Same as above */}
+              <HSpacer size={16} />
+            </>
           )}
           {(type === "twoActions" || type === "threeActions") && (
             <>
+              <IconButton {...secondAction} color="neutral" />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
               <HSpacer size={16} />
-              <IconButton {...secondAction} color="neutral" />
             </>
           )}
-          {type === "threeActions" && (
-            <>
-              {/* Same as above */}
-              <HSpacer size={16} />
-              <IconButton {...thirdAction} color="neutral" />
-            </>
+          {type !== "base" ? (
+            <IconButton {...firstAction} color="neutral" />
+          ) : (
+            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}
         </View>
       </Animated.View>

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from "react";
+import { View, Animated, Easing } from "react-native";
+import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
+import { WithTestID } from "../../utils/types";
+import { IOColors } from "../../core";
+
+type Props = WithTestID<{
+  color?: IOColors;
+  stroke?: number;
+  size?: IOLoadingSpinnerSizeScale;
+  durationMs?: number;
+}>;
+
+/**
+ * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
+ * It will be removed in the future.
+ */
+export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
+
+const startRotationAnimation = (
+  durationMs: number,
+  rotationDegree: Animated.Value
+): void => {
+  Animated.loop(
+    Animated.timing(rotationDegree, {
+      toValue: 360,
+      duration: durationMs,
+      easing: Easing.linear,
+      useNativeDriver: true
+    })
+  ).start();
+};
+
+export const LoadingSpinner = ({
+  color = "blueIO-500",
+  stroke = 3,
+  size = 24,
+  durationMs = 750
+}: Props): React.ReactElement => {
+  const rotationDegree = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    startRotationAnimation(durationMs, rotationDegree);
+  }, [durationMs, rotationDegree]);
+
+  return (
+    <>
+      <View
+        style={{ width: size, height: size }}
+        accessibilityRole="progressbar"
+        testID={"LoadingSpinnerTestID"}
+      >
+        <Animated.View
+          testID={"LoadingSpinnerAnimatedTestID"}
+          style={{
+            transform: [
+              {
+                rotateZ: rotationDegree.interpolate({
+                  inputRange: [0, 360],
+                  outputRange: ["0deg", "360deg"]
+                })
+              }
+            ]
+          }}
+        >
+          {/* Thanks to Ben Ilegbodu for the article on how to
+          create a a SVG gradient loading spinner. Below is
+          a parameterized version of his  version of his code.
+          Source: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ */}
+          <Svg
+            width={size}
+            height={size}
+            viewBox={`0 0 ${size} ${size}`}
+            fill="none"
+          >
+            <Defs>
+              <LinearGradient id="spinner-secondHalf">
+                <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
+                <Stop
+                  offset="100%"
+                  stopOpacity="1"
+                  stopColor={IOColors[color]}
+                />
+              </LinearGradient>
+              <LinearGradient id="spinner-firstHalf">
+                <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
+                <Stop
+                  offset="100%"
+                  stopOpacity="1"
+                  stopColor={IOColors[color]}
+                />
+              </LinearGradient>
+            </Defs>
+
+            <G strokeWidth={stroke}>
+              <Path
+                stroke="url(#spinner-secondHalf)"
+                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                  size / 2 - stroke / 2
+                } 0 0 1 ${size - stroke / 2} ${size / 2}`}
+              />
+              <Path
+                stroke="url(#spinner-firstHalf)"
+                d={`M ${size - stroke / 2} ${size / 2} A ${
+                  size / 2 - stroke / 2
+                } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
+              />
+              <Path
+                stroke={IOColors[color]}
+                strokeLinecap="round"
+                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                  size / 2 - stroke / 2
+                } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
+              />
+            </G>
+          </Svg>
+        </Animated.View>
+      </View>
+    </>
+  );
+};

package/src/components/loadingSpinner/index.tsx

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

package/src/components/pictograms/Pictogram.tsx

@@ -60,6 +60,7 @@ import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramFeature from "./svg/PictogramFeature";
+import PictogramNotification from "./svg/PictogramNotification";
 import PictogramObjClock from "./svg/PictogramObjClock";
 import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
 import PictogramObjManual from "./svg/PictogramObjManual";
@@ -77,6 +78,7 @@ import PictogramBleedFeature from "./svg/PictogramBleedFeature";
 import PictogramBleedCie from "./svg/PictogramBleedCie";
 import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
 import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
+import PictogramBleedNotification from "./svg/PictogramBleedNotification";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -134,6 +136,7 @@ export const IOPictograms = {
   cie: PictogramCie,
   time: PictogramTime,
   passcode: PictogramPasscode,
+  notification: PictogramNotification,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -227,7 +230,8 @@ export type IOPictogramsBleed = Extract<
   | "feature"
   | "cie"
   | "cameraRequest"
-  | "cameraDenied",
+  | "cameraDenied"
+  | "notification",
   IOPictograms
 >;
 
@@ -242,7 +246,8 @@ export const IOPictogramsBleed: {
   feature: PictogramBleedFeature,
   cie: PictogramBleedCie,
   cameraRequest: PictogramBleedCameraRequest,
-  cameraDenied: PictogramBleedCameraDenied
+  cameraDenied: PictogramBleedCameraDenied,
+  notification: PictogramBleedNotification
 };
 
 export const PictogramBleed = ({