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

package/src/components/icons/svg/IconEntityCode.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconEntityCode = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4ZM0 6C0 3.79086 1.79086 2 4 2H20C22.2091 2 24 3.79086 24 6V18C24 20.2091 22.2091 22 20 22H4C1.79086 22 0 20.2091 0 18V6ZM7.20416 8.26887C7.76751 7.91038 8.48744 7.91038 9.05078 8.26887L11.7771 10.0038C12.0747 10.1932 12.2549 10.5215 12.2549 10.8743V11.5286C12.2549 11.7185 12.1009 11.8725 11.911 11.8725H11.567V15.656C11.567 15.846 11.413 16 11.2231 16H9.84725C9.65729 16 9.5033 15.846 9.5033 15.656V11.8725H6.75165V15.656C6.75165 15.846 6.59765 16 6.40769 16H5.03187C4.84191 16 4.68791 15.846 4.68791 15.656V11.8725H4.34396C4.15399 11.8725 4 11.7185 4 11.5286V10.8743C4 10.5215 4.18024 10.1932 4.47788 10.0038L7.20416 8.26887ZM15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H15ZM14 14C14 13.4477 14.4477 13 15 13H19C19.5523 13 20 13.4477 20 14C20 14.5523 19.5523 15 19 15H15C14.4477 15 14 14.5523 14 14Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconEntityCode;

package/src/components/icons/svg/IconNotes.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconNotes = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 6.5C5 5.67157 5.67157 5 6.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15H18C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13H6ZM5 18C5 17.4477 5.44772 17 6 17H18C18.5523 17 19 17.4477 19 18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconNotes;

package/src/components/icons/svg/originals/IconDocPaymentCode.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 17.5C5 16.6716 5.67157 16 6.5 16C7.32843 16 8 16.6716 8 17.5C8 18.3284 7.32843 19 6.5 19C5.67157 19 5 18.3284 5 17.5ZM10 17.5C10 16.6716 10.6716 16 11.5 16H14.5C15.3284 16 16 16.6716 16 17.5C16 18.3284 15.3284 19 14.5 19H11.5C10.6716 19 10 18.3284 10 17.5Z" fill="#BBC2D6"/>
+</svg>

package/src/components/icons/svg/originals/IconEntityCode.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4ZM0 6C0 3.79086 1.79086 2 4 2H20C22.2091 2 24 3.79086 24 6V18C24 20.2091 22.2091 22 20 22H4C1.79086 22 0 20.2091 0 18V6ZM7.20416 8.26887C7.76751 7.91038 8.48744 7.91038 9.05078 8.26887L11.7771 10.0038C12.0747 10.1932 12.2549 10.5215 12.2549 10.8743V11.5286C12.2549 11.7185 12.1009 11.8725 11.911 11.8725H11.567V15.656C11.567 15.846 11.413 16 11.2231 16H9.84725C9.65729 16 9.5033 15.846 9.5033 15.656V11.8725H6.75165V15.656C6.75165 15.846 6.59765 16 6.40769 16H5.03187C4.84191 16 4.68791 15.846 4.68791 15.656V11.8725H4.34396C4.15399 11.8725 4 11.7185 4 11.5286V10.8743C4 10.5215 4.18024 10.1932 4.47788 10.0038L7.20416 8.26887ZM15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H15ZM14 14C14 13.4477 14.4477 13 15 13H19C19.5523 13 20 13.4477 20 14C20 14.5523 19.5523 15 19 15H15C14.4477 15 14 14.5523 14 14Z" fill="#2B2E38"/>
+</svg>

package/src/components/icons/svg/originals/IconNotes.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 6.5C5 5.67157 5.67157 5 6.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15H18C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13H6ZM5 18C5 17.4477 5.44772 17 6 17H18C18.5523 17 19 17.4477 19 18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z" fill="#BBC2D6"/>
+</svg>

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";
@@ -18,6 +19,7 @@ export * from "./spacer";
 export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
+export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
 export * from "./layout";

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/Dismissable.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Dimensions } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+
+const windowWidth = Dimensions.get("window").width;
+
+type Dismissable = WithTestID<{
+  onDismiss?: () => void;
+  dismissThreshold?: number;
+  children: React.ReactNode;
+}>;
+
+/**
+ * Component that allows for a dismissable gesture, both left and right.
+ * When the threshold is reached, the `onDismiss` callback is called.
+ * @param onDismiss Callback to be called when the threshold is reached.
+ * @param dismissThreshold Threshold to be reached to call the `onDismiss` callback.
+ * @param children Children to be rendered inside the component.
+ * @returns A dismissable component.
+ */
+const Dismissable = ({
+  onDismiss = () => undefined,
+  dismissThreshold = windowWidth / 3,
+  children,
+  testID
+}: Dismissable) => {
+  const translateX = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: translateX.value
+      }
+    ]
+  }));
+
+  const pan = Gesture.Pan()
+    .onUpdate(event => {
+      // eslint-disable-next-line functional/immutable-data
+      translateX.value = event.translationX;
+    })
+    .onEnd(event => {
+      if (Math.abs(event.translationX) > dismissThreshold) {
+        // eslint-disable-next-line functional/immutable-data
+        translateX.value = withTiming(
+          windowWidth * Math.sign(event.translationX),
+          {
+            duration: 300,
+            easing: Easing.inOut(Easing.exp)
+          },
+          runOnJS(onDismiss)
+        );
+      } else {
+        // eslint-disable-next-line functional/immutable-data
+        translateX.value = withSpring(0, { mass: 0.5 });
+      }
+    })
+    .withTestId(testID ?? "");
+
+  return (
+    <GestureDetector gesture={pan}>
+      <Animated.View style={animatedStyle}>{children}</Animated.View>
+    </GestureDetector>
+  );
+};
+
+export { Dismissable };

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

@@ -5,16 +5,43 @@ import { WithTestID } from "../../utils/types";
 import { IOStyles, IOVisualCostants, IOColors } from "../../core";
 import { H3 } from "../typography";
 import { HSpacer } from "../spacer";
+import { IconButton } from "../buttons";
+import { ActionProp } from "./common";
 
-export type HeaderFirstLevel = WithTestID<{
+type CommonProps = WithTestID<{
   title: string;
-  // Accepted components: IconButton
-  // Don't use any components other than this, please.
-  firstAction?: React.ReactNode;
-  secondAction?: React.ReactNode;
-  thirdAction?: React.ReactNode;
 }>;
 
+interface Base extends CommonProps {
+  type: "base";
+  firstAction?: never;
+  secondAction?: never;
+  thirdAction?: never;
+}
+
+interface OneAction extends CommonProps {
+  type: "singleAction";
+  firstAction: ActionProp;
+  secondAction?: never;
+  thirdAction?: never;
+}
+
+interface TwoActions extends CommonProps {
+  type: "twoActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction?: never;
+}
+
+interface ThreeActions extends CommonProps {
+  type: "threeActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction: ActionProp;
+}
+
+export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
+
 const HEADER_BG_COLOR: IOColors = "white";
 
 const styles = StyleSheet.create({
@@ -30,10 +57,11 @@ const styles = StyleSheet.create({
 
 export const HeaderFirstLevel = ({
   title,
+  type,
+  testID,
   firstAction,
   secondAction,
-  thirdAction,
-  testID
+  thirdAction
 }: HeaderFirstLevel) => {
   const insets = useSafeAreaInsets();
 
@@ -51,22 +79,22 @@ export const HeaderFirstLevel = ({
           {title}
         </H3>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {firstAction}
-          {secondAction && (
+          {type === "threeActions" && (
             <>
+              <IconButton {...thirdAction} color="neutral" />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
               <HSpacer size={16} />
-              {secondAction}
             </>
           )}
-          {thirdAction && (
+          {(type === "twoActions" || type === "threeActions") && (
             <>
+              <IconButton {...secondAction} color="neutral" />
               {/* Same as above */}
               <HSpacer size={16} />
-              {thirdAction}
             </>
           )}
+          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
         </View>
       </View>
     </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -19,11 +19,7 @@ import type { IOSpacer } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { makeFontStyleObject } from "../../utils/fonts";
-
-type ActionProp = Pick<
-  React.ComponentProps<typeof IconButton>,
-  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
->;
+import { ActionProp } from "./common";
 
 type ScrollValues = {
   contentOffsetY: Animated.SharedValue<number>;
@@ -41,17 +37,23 @@ type CommonProps = WithTestID<{
 
 interface Base extends CommonProps {
   type: "base";
+  firstAction?: never;
+  secondAction?: never;
+  thirdAction?: never;
 }
 
 interface OneAction extends CommonProps {
   type: "singleAction";
   firstAction: ActionProp;
+  secondAction?: never;
+  thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
   firstAction: ActionProp;
   secondAction: ActionProp;
+  thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
@@ -98,16 +100,18 @@ const styles = StyleSheet.create({
  * @param {HeaderSecondLevel} props - The props of the component
  * @returns React Element
  */
-export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
-  const {
-    scrollValues = undefined,
-    goBack,
-    backAccessibilityLabel,
-    title,
-    type,
-    transparent = false,
-    testID
-  } = props;
+export const HeaderSecondLevel = ({
+  scrollValues = undefined,
+  goBack,
+  backAccessibilityLabel,
+  title,
+  type,
+  transparent = false,
+  testID,
+  firstAction,
+  secondAction,
+  thirdAction
+}: HeaderSecondLevel) => {
   const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
@@ -175,25 +179,25 @@ export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
           {title}
         </Animated.Text>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {type !== "base" ? (
-            <IconButton {...props.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 {...props.secondAction} color="neutral" />
             </>
           )}
-          {type === "threeActions" && (
-            <>
-              {/* Same as above */}
-              <HSpacer size={16} />
-              <IconButton {...props.thirdAction} color="neutral" />
-            </>
+          {type !== "base" ? (
+            <IconButton {...firstAction} color="neutral" />
+          ) : (
+            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}
         </View>
       </Animated.View>

package/src/components/layout/common.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { IconButton } from "../buttons";
+
+export type ActionProp = Pick<
+  React.ComponentProps<typeof IconButton>,
+  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
+>;

package/src/components/layout/index.tsx

@@ -1,3 +1,4 @@
+export * from "./common";
 export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";

package/src/components/listitems/ListItemTransaction.tsx

@@ -14,12 +14,12 @@ import {
   useIOTheme
 } from "../../core";
 
-import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
-import { isImageUri } from "../../utils/url";
-import { WithTestID } from "../../utils/types";
 import { getAccessibleAmountText } from "../../utils/accessibility";
+import { WithTestID } from "../../utils/types";
+import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
+import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
@@ -64,6 +64,7 @@ export type ListItemTransaction = WithTestID<
     paymentLogoIcon?: ListItemTransactionLogo;
     subtitle: string;
     title: string;
+    accessible?: boolean;
   } & (
       | {
           transactionStatus: ListItemTransactionStatusWithoutBadge;
@@ -114,7 +115,8 @@ export const ListItemTransaction = ({
   title,
   transactionAmount,
   badgeText,
-  transactionStatus = "success"
+  transactionStatus = "success",
+  accessible
 }: ListItemTransaction) => {
   const theme = useIOTheme();
 
@@ -203,7 +205,7 @@ export const ListItemTransaction = ({
         <View
           style={IOListItemStyles.listItem}
           testID={testID}
-          accessible={true}
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
         >
           <View style={IOListItemStyles.listItemInner}>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -224,6 +224,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="bluegrey"
         defaultColor="bluegrey"
         defaultWeight="Regular"
@@ -350,6 +351,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           color="bluegrey"
           defaultColor="bluegrey"
           defaultWeight="Regular"

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/logos/LogoPaymentCard.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { hexToRgba, IOColors } from "../../core";
+
+/* Logos */
+import LogoPaymentCardPayPal from "./svg/LogoPaymentCardPayPal";
+import LogoPaymentCardBancomatPay from "./svg/LogoPaymentCardBancomatPay";
+
+export const IOPaymentCardLogos = {
+  payPal: LogoPaymentCardPayPal,
+  bancomatPay: LogoPaymentCardBancomatPay
+} as const;
+
+export type IOLogoPaymentCardType = keyof typeof IOPaymentCardLogos;
+
+type IOPaymentLogos = {
+  name: IOLogoPaymentCardType;
+  align: "start" | "center" | "end";
+  width?: "100%" | number;
+  height?: number;
+  debugMode?: boolean;
+};
+
+export type SVGCardLogoProps = {
+  preserveAspectRatio: "xMinYMin meet" | "xMidYMid meet" | "xMaxYMax meet";
+};
+
+const preserveAspectRatioValues: Record<
+  IOPaymentLogos["align"],
+  SVGCardLogoProps["preserveAspectRatio"]
+> = {
+  start: "xMinYMin meet",
+  center: "xMidYMid meet",
+  end: "xMaxYMax meet"
+};
+
+const styles = StyleSheet.create({
+  debugMode: {
+    backgroundColor: hexToRgba(IOColors["error-500"], 0.2)
+  }
+});
+
+const LogoPaymentCard = ({
+  name,
+  width = "100%",
+  height = 32,
+  align = "center",
+  debugMode = false,
+  ...props
+}: IOPaymentLogos) => {
+  const LogoElement = IOPaymentCardLogos[name];
+  return (
+    <View style={[{ width, height }, debugMode && styles.debugMode]}>
+      <LogoElement
+        preserveAspectRatio={preserveAspectRatioValues[align]}
+        {...props}
+      />
+    </View>
+  );
+};
+
+export default LogoPaymentCard;

package/src/components/logos/LogoPaymentExt.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import LogoPaymentExtAmex from "./svg/LogoPaymentExtAmex";
 
 /* Logos */
 import LogoPaymentExtMaestro from "./svg/LogoPaymentExtMaestro";
@@ -15,6 +14,7 @@ import LogoPaymentExtBancomatPay from "./svg/LogoPaymentExtBancomatPay";
 import LogoPaymentExtPostepay from "./svg/LogoPaymentExtPostepay";
 import LogoPaymentExtPagoBancomat from "./svg/LogoPaymentExtPagoBancomat";
 import LogoPaymentExtApplePay from "./svg/LogoPaymentExtApplePay";
+import LogoPaymentExtAmex from "./svg/LogoPaymentExtAmex";
 
 export const IOPaymentExtLogos = {
   maestro: LogoPaymentExtMaestro,