@pagopa/io-app-design-system 1.25.1 → 1.27.0

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -33,13 +33,14 @@ const styles = StyleSheet.create({
     height: IOVisualCostants.avatarSizeSmall,
     padding: internalSpacing
   },
-  checkBoxCircle: {
+  checkBoxShape: {
     position: "absolute",
     left: 0,
     top: 0,
     width: IOVisualCostants.avatarSizeSmall,
     height: IOVisualCostants.avatarSizeSmall,
-    borderRadius: IOVisualCostants.avatarSizeSmall
+    borderRadius: IOVisualCostants.avatarRadiusSizeSmall,
+    borderCurve: "continuous"
   }
 });
 
@@ -96,7 +97,7 @@ export const AnimatedMessageCheckbox = ({
     >
       <Animated.View
         style={[
-          styles.checkBoxCircle,
+          styles.checkBoxShape,
           {
             backgroundColor: backgroundColorProp
           },

package/src/components/divider/Divider.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { IOColors, IOThemeContext } from "../../core";
+import { IOColors, useIOTheme } from "../../core";
 
 type DividerOrientation = "vertical" | "horizontal";
 
@@ -15,7 +15,7 @@ Native `Divider` component
 @param  {DividerOrientation} orientation
  */
 const BaseDivider = React.memo(({ orientation }: DividerProps) => {
-  const theme = React.useContext(IOThemeContext);
+  const theme = useIOTheme();
   const baseStyle = {
     backgroundColor: IOColors[theme["divider-default"]],
     ...(orientation === "vertical"

package/src/components/layout/BlockButtons.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { HSpacer } from "../spacer/Spacer";
-import { ButtonOutline, ButtonSolid, ButtonSolidProps } from "../buttons";
+import { ButtonOutline, ButtonSolid } from "../buttons";
 import { IOStyles } from "../../core";
 
 const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ type CommonProps = Readonly<{
 
 export type BlockButtonProps = {
   type: "Solid" | "Outline";
-  buttonProps: Omit<ButtonSolidProps, "fullWidth">;
+  buttonProps: Omit<React.ComponentProps<typeof ButtonSolid>, "fullWidth">;
 };
 
 /**

package/src/components/layout/GradientBottomActions.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { Easing, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { easeGradient } from "react-native-easing-gradient";
 import LinearGradient from "react-native-linear-gradient";
 import Animated from "react-native-reanimated";
 import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
@@ -33,6 +34,15 @@ type GradientBottomActionsDimensions = {
 // Background color should be app main background (both light and dark themes)
 const HEADER_BG_COLOR: IOColors = "white";
 
+const { colors, locations } = easeGradient({
+  colorStops: {
+    0: { color: hexToRgba(IOColors[HEADER_BG_COLOR], 0) },
+    1: { color: IOColors[HEADER_BG_COLOR] }
+  },
+  easing: Easing.ease,
+  extraColorStopsPerTransition: 20
+});
+
 const styles = StyleSheet.create({
   buttonContainer: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -84,14 +94,18 @@ export const GradientBottomActions = ({
       ]}
       pointerEvents="none"
     >
+      {/* 100% opacity bg color fills at least 45% of the area */}
       <LinearGradient
-        style={{ height: dimensions.gradientAreaHeight }}
-        // 100% opacity bg color fills at least 50% of the area
-        locations={[0, 0.5]}
-        colors={[
-          hexToRgba(IOColors[HEADER_BG_COLOR], 0),
-          IOColors[HEADER_BG_COLOR]
-        ]}
+        style={{ height: dimensions.gradientAreaHeight * 0.55 }}
+        locations={locations}
+        colors={colors}
+      />
+      <View
+        style={{
+          bottom: 0,
+          height: dimensions.gradientAreaHeight * 0.45,
+          backgroundColor: IOColors[HEADER_BG_COLOR]
+        }}
       />
     </Animated.View>
 

package/src/components/layout/GradientScrollView.tsx

@@ -28,7 +28,7 @@ export type GradientScrollView = WithTestID<{
 }>;
 
 // Extended gradient area above the actions
-export const gradientSafeArea: IOSpacingScale = 80;
+export const gradientSafeArea: IOSpacingScale = 96;
 // End content margin before the actions
 const contentEndMargin: IOSpacingScale = 32;
 // Margin between primary action and secondary one

package/src/components/layout/HeaderFirstLevel.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
+import {
+  View,
+  StyleSheet,
+  AccessibilityInfo,
+  findNodeHandle
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { WithTestID } from "../../utils/types";
 import { IOStyles, IOVisualCostants, IOColors } from "../../core";
@@ -67,6 +72,14 @@ export const HeaderFirstLevel = ({
   secondAction,
   thirdAction
 }: HeaderFirstLevel) => {
+  const titleRef = React.createRef<View>();
+
+  React.useLayoutEffect(() => {
+    const reactNode = findNodeHandle(titleRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
   const insets = useSafeAreaInsets();
 
   return (
@@ -82,13 +95,15 @@ export const HeaderFirstLevel = ({
       testID={testID}
     >
       <View style={styles.headerInner}>
-        <H3
-          style={{ flexShrink: 1 }}
-          numberOfLines={1}
-          color={backgroundColor === "dark" ? "white" : "black"}
-        >
-          {title}
-        </H3>
+        <View ref={titleRef} accessible accessibilityRole="header">
+          <H3
+            style={{ flexShrink: 1 }}
+            numberOfLines={1}
+            color={backgroundColor === "dark" ? "white" : "black"}
+          >
+            {title}
+          </H3>
+        </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
             <>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { View, StyleSheet, Platform } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Platform,
+  findNodeHandle,
+  AccessibilityInfo
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   interpolate,
@@ -89,13 +95,15 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between"
   },
-  headerTitle: {
-    fontSize: 14,
-    textAlign: "center",
+  titleContainer: {
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
   },
+  headerTitle: {
+    fontSize: 14,
+    textAlign: "center"
+  },
   headerTitleFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
@@ -122,9 +130,18 @@ export const HeaderSecondLevel = ({
   secondAction,
   thirdAction
 }: HeaderSecondLevel) => {
+  const titleRef = React.createRef<View>();
+
   const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
+  React.useLayoutEffect(() => {
+    const reactNode = findNodeHandle(titleRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
+
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
     backgroundColor:
       transparent && scrollValues
@@ -182,19 +199,27 @@ export const HeaderSecondLevel = ({
         ) : (
           <HSpacer size={32} />
         )}
-        <Animated.Text
-          numberOfLines={1}
+        <View
+          ref={titleRef}
           accessible={isTitleAccessible}
-          style={[
-            styles.headerTitle,
-            isExperimental
-              ? styles.headerTitleFont
-              : styles.headerTitleLegacyFont,
-            titleAnimatedStyle
-          ]}
+          accessibilityLabel={title}
+          accessibilityRole="header"
+          style={styles.titleContainer}
         >
-          {title}
-        </Animated.Text>
+          <Animated.Text
+            numberOfLines={1}
+            accessible={false}
+            style={[
+              styles.headerTitle,
+              isExperimental
+                ? styles.headerTitleFont
+                : styles.headerTitleLegacyFont,
+              titleAnimatedStyle
+            ]}
+          >
+            {title}
+          </Animated.Text>
+        </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
             <>

package/src/components/layout/ModalBSHeader.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { useLayoutEffect } from "react";
+import {
+  View,
+  StyleSheet,
+  findNodeHandle,
+  AccessibilityInfo
+} from "react-native";
+import {
+  IOColors,
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  IOStyles
+} from "../../core";
+import { H4 } from "../typography";
+import { IconButton } from "../buttons";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    paddingTop: IOVisualCostants.appMarginDefault,
+    paddingBottom: IOVisualCostants.appMarginDefault,
+    backgroundColor: IOColors.white
+  }
+});
+
+type Props = {
+  title: string | React.ReactNode;
+  onClose: () => void;
+  closeAccessibilityLabel: string;
+};
+
+/**
+ * A header for a modals and bottom sheet.
+ * @param title - The title of the modal.
+ * @param onClose - The function to call when the close button is pressed.
+ * @param closeAccessibilityLabel - The accessibility label for the close button.
+ *
+ */
+export const ModalBSHeader = ({
+  title,
+  onClose,
+  closeAccessibilityLabel
+}: Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  const headerRef = React.createRef<View>();
+
+  useLayoutEffect(() => {
+    const reactNode = findNodeHandle(headerRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
+
+  return (
+    <View style={styles.container} ref={headerRef}>
+      {React.isValidElement(title) ? (
+        title
+      ) : (
+        <View
+          style={IOStyles.flex}
+          accessible={true}
+          accessibilityRole={"header"}
+          accessibilityLabel={typeof title === "string" ? title : undefined}
+        >
+          <H4>{title}</H4>
+        </View>
+      )}
+      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following condition */}
+      {isExperimental ? (
+        <IconButton
+          color="neutral"
+          onPress={onClose}
+          icon="closeMedium"
+          accessibilityLabel={closeAccessibilityLabel}
+        />
+      ) : (
+        <View style={{ opacity: 0.5 }}>
+          <IconButton
+            color="neutral"
+            onPress={onClose}
+            icon="closeMedium"
+            accessibilityLabel={closeAccessibilityLabel}
+          />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/layout/index.tsx

@@ -6,3 +6,4 @@ export * from "./HeaderSecondLevel";
 export * from "./ForceScrollDownView";
 export * from "./FooterWithButtons";
 export * from "./BlockButtons";
+export * from "./ModalBSHeader";

package/src/components/listitems/ListItemAction.tsx

@@ -177,6 +177,7 @@ export const ListItemAction = ({
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        importantForAccessibility="no-hide-descendants"
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -125,6 +125,7 @@ export const ListItemInfoCopy = ({
       testID={testID}
     >
       <Animated.View
+        importantForAccessibility="no-hide-descendants"
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
       >
         <Animated.View

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

@@ -36,6 +36,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
   onTouchEnd={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -139,6 +140,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderWidth": 1,
           "flexDirection": "row",
@@ -330,6 +332,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
   onStartShouldSetResponder={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -1765,6 +1768,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -1868,6 +1872,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderWidth": 1,
           "flexDirection": "row",
@@ -2059,6 +2064,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
   onStartShouldSetResponder={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {

package/src/components/otpInput/BoxedInput.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { IOColors } from "../../core";
 import { BaseTypography, H6 } from "../typography";
 
@@ -16,7 +16,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     width: 35,
     height: 60,
-    borderRadius: 8
+    borderRadius: 8,
+    borderCurve: "continuous"
   },
   defaultBox: {
     borderWidth: 1,

package/src/components/pictograms/Pictogram.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
-import {
-  IOColors,
-  IOThemeDark,
-  IOThemeLight,
-  useIOTheme
-} from "../../core/IOColors";
+import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
 
 import PictogramAbacus from "./svg/PictogramAbacus";
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";

package/src/components/switch/NativeSwitch.tsx

@@ -42,6 +42,8 @@ export const NativeSwitch = ({
   return (
     <Switch
       {...accessibility}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled: accessibility.disabled }}
       trackColor={trackColorComponent}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
       ios_backgroundColor={

package/src/components/tabs/TabItem.tsx

@@ -9,12 +9,12 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import { IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelHeader } from "../typography/LabelHeader";
-import { IOSpringValues, IOColors, hexToRgba, IOScaleValues } from "../../core";
-import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 
 type ColorMode = "light" | "dark";
 
@@ -186,7 +186,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    borderRadius: 65,
+    borderRadius: 64,
+    borderCurve: "continuous",
     justifyContent: "center",
     alignSelf: "flex-start"
   },

package/src/components/tag/Tag.tsx

@@ -1,16 +1,16 @@
-import React from "react";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { View, Text, StyleSheet, Platform } from "react-native";
-import { WithTestID } from "../../utils/types";
-import { makeFontStyleObject } from "../../utils/fonts";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import React from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
 import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 
 export type Tag = WithTestID<{
   text?: string;
@@ -80,10 +80,11 @@ const styles = StyleSheet.create({
         textAlignVertical: "center"
       }
     }),
-    borderWidth: 1,
     backgroundColor: IOColors.white,
+    borderWidth: 1,
     borderColor: IOColors["grey-100"],
     borderRadius: IOTagRadius,
+    borderCurve: "continuous",
     paddingHorizontal: IOTagHSpacing,
     paddingVertical: IOTagVSpacing
   },

package/src/components/textInput/TextInputBase.tsx

@@ -21,14 +21,14 @@ import {
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
-import { InputType } from "../../utils/types";
+import { InputType, WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
-type InputTextProps = {
+type InputTextProps = WithTestID<{
   placeholder: string;
   value: string;
   onChangeText: (value: string) => void;
@@ -45,7 +45,7 @@ type InputTextProps = {
   isPassword?: boolean;
   onBlur?: () => void;
   onFocus?: () => void;
-};
+}>;
 
 const inputMarginTop: IOSpacingScale = 8;
 
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     height: 60,
     borderRadius: 8,
+    borderCurve: "continuous",
     paddingHorizontal: 12
   },
   textInputStyle: {

package/src/components/toast/ToastNotification.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
   toast: {
     borderRadius: IOAlertRadius,
     borderWidth: 1,
+    borderCurve: "continuous",
     padding: 16,
     flexDirection: "row",
     alignItems: "center",

package/src/core/IOColors.ts

@@ -1,6 +1,5 @@
 import type { ComponentProps } from "react";
-import * as React from "react";
-import { Appearance, ColorValue } from "react-native";
+import { ColorValue } from "react-native";
 import type LinearGradient from "react-native-linear-gradient"; // Used by `getGradientColorValues` function
 
 /*
@@ -400,15 +399,6 @@ export const themeStatusColorsDarkMode: Record<
 
 export type themeStatusColorsDarkMode = keyof typeof themeStatusColorsDarkMode;
 
-/*
-THEME CONTEXT
-*/
-export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };
-export const IOThemeContext: React.Context<IOTheme> = React.createContext(
-  Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light
-);
-export const useIOTheme = () => React.useContext(IOThemeContext);
-
 /*
 UTILS
 */

package/src/core/IOSpacing.ts

@@ -19,7 +19,8 @@ export type IOSpacingScale =
   | 56
   | 64
   | 72
-  | 80;
+  | 80
+  | 96;
 
 // Values used in the new `<Spacer>` component
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;

package/src/core/IOStyles.ts

@@ -21,6 +21,8 @@ interface IOVisualCostants {
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
+  avatarRadiusSizeSmall: number;
+  avatarRadiusSizeMedium: number;
   iconContainedSizeDefault: number;
   scrollDownButtonRight: number;
   scrollDownButtonBottom: number;
@@ -31,6 +33,8 @@ export const IOVisualCostants: IOVisualCostants = {
   headerHeight: 56,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
+  avatarRadiusSizeSmall: 8,
+  avatarRadiusSizeMedium: 12,
   iconContainedSizeDefault: 44,
   scrollDownButtonRight: 24,
   scrollDownButtonBottom: 24
@@ -162,6 +166,7 @@ export const IOButtonStyles = StyleSheet.create({
     /* Legacy visual properties. They will be replaced with
     dynamic ones once NativeBase is gone */
     borderRadius: btnBorderRadius,
+    borderCurve: "continuous",
     paddingHorizontal: 24,
     // Reset default visual parameters
     elevation: 0
@@ -288,6 +293,7 @@ export const IOModuleStyles = StyleSheet.create({
     borderWidth: 1,
     borderColor: IOColors["grey-100"],
     borderRadius: IOModuleIDPRadius,
+    borderCurve: "continuous",
     backgroundColor: IOColors.white,
     flexDirection: "row",
     justifyContent: "space-between",