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

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -4,11 +4,12 @@ import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
 import { IOColors } from "../../core";
 
-type Props = WithTestID<{
+export type LoadingSpinner = WithTestID<{
   color?: IOColors;
-  stroke?: number;
   size?: IOLoadingSpinnerSizeScale;
   durationMs?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }>;
 
 /**
@@ -17,6 +18,12 @@ type Props = WithTestID<{
  */
 export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
 
+const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+  24: 3,
+  48: 5,
+  76: 7
+};
+
 const startRotationAnimation = (
   durationMs: number,
   rotationDegree: Animated.Value
@@ -33,89 +40,86 @@ const startRotationAnimation = (
 
 export const LoadingSpinner = ({
   color = "blueIO-500",
-  stroke = 3,
   size = 24,
-  durationMs = 750
-}: Props): React.ReactElement => {
+  durationMs = 850,
+  accessibilityHint,
+  accessibilityLabel,
+  testID = "LoadingSpinnerTestID"
+}: LoadingSpinner): React.ReactElement => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
+  const stroke: number = strokeMap[size];
 
   useEffect(() => {
     startRotationAnimation(durationMs, rotationDegree);
   }, [durationMs, rotationDegree]);
 
   return (
-    <>
-      <View
-        style={{ width: size, height: size }}
-        accessibilityRole="progressbar"
-        testID={"LoadingSpinnerTestID"}
+    <View
+      style={{ width: size, height: size }}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={"no-hide-descendants"}
+      testID={testID}
+    >
+      <Animated.View
+        testID={"LoadingSpinnerAnimatedTestID"}
+        style={{
+          transform: [
+            {
+              rotateZ: rotationDegree.interpolate({
+                inputRange: [0, 360],
+                outputRange: ["0deg", "360deg"]
+              })
+            }
+          ]
+        }}
       >
-        <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
+        {/* 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.
+          a parameterized 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>
+        <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>
-    </>
+          <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/switch/NativeSwitch.tsx

@@ -4,13 +4,20 @@ import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
 
-type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
+type OwnProps = Pick<
+  SwitchProps,
+  "onValueChange" | "value" | "accessible" | "accessibilityLabel"
+>;
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const bgLegacyTrackColorAndroid =
   Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
 
-export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
+export const NativeSwitch = ({
+  onValueChange,
+  value,
+  ...accessibility
+}: OwnProps) => {
   const { isExperimental } = useIOExperimentalDesign();
   const trackColor = {
     false: IOColors[IOSwitchVisualParams.bgColorOffState],
@@ -27,6 +34,7 @@ export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
 
   return (
     <Switch
+      {...accessibility}
       trackColor={trackColorComponent}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
       ios_backgroundColor={

package/src/components/textInput/TextInputBase.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable functional/immutable-data */
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   Pressable,
   StyleSheet,
@@ -6,7 +7,6 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -19,18 +19,23 @@ import {
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { getInputPropsByType } from "../../utils/textInput";
+import { InputType } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
-import { InputType } from "../../utils/types";
-import { getInputPropsByType } from "../../utils/textInput";
-import { makeFontStyleObject } from "../../utils/fonts";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
 type RNTextInputProps = Pick<
   React.ComponentProps<typeof TextInput>,
-  "keyboardType" | "inputMode" | "textContentType" | "autoComplete"
+  | "keyboardType"
+  | "inputMode"
+  | "textContentType"
+  | "autoComplete"
+  | "returnKeyType"
+  | "autoCapitalize"
 >;
 
 type InputTextProps = {
@@ -39,7 +44,7 @@ type InputTextProps = {
   onChangeText: (value: string) => void;
   accessibilityLabel?: string;
   textInputProps?: RNTextInputProps;
-  inputTyoe?: InputType;
+  inputType?: InputType;
   status?: InputStatus;
   icon?: IOIcons;
   rightElement?: React.ReactNode;
@@ -152,7 +157,7 @@ export const TextInputBase = ({
   onChangeText,
   accessibilityLabel,
   textInputProps,
-  inputTyoe = "default",
+  inputType = "default",
   status,
   icon,
   rightElement,
@@ -248,8 +253,8 @@ export const TextInputBase = ({
   }, [value, labelSharedValue, onBlur]);
 
   const derivedInputProps = useMemo(
-    () => getInputPropsByType(inputTyoe),
-    [inputTyoe]
+    () => getInputPropsByType(inputType),
+    [inputType]
   );
 
   const inputValue = useMemo(
@@ -319,6 +324,7 @@ export const TextInputBase = ({
             style={[
               animatedLabelProps,
               {
+                ...makeFontStyleObject("Regular", false, "TitilliumWeb"),
                 color: IOColors["grey-700"]
               }
             ]}

package/src/utils/textInput/index.ts

@@ -20,7 +20,8 @@ export const getInputPropsByType = (
           autoComplete: "cc-number",
           keyboardType: "numeric",
           textContentType: "creditCardNumber",
-          inputMode: "numeric"
+          inputMode: "numeric",
+          returnKeyType: "done"
         }
       };
     default: