@pagopa/io-app-design-system 5.6.3 → 5.6.5

package/src/components/claimsSelector/ClaimsSelector.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { StyleSheet, View } from "react-native";
+import { Image, StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import LinearGradient from "react-native-linear-gradient";
@@ -54,8 +54,9 @@ type Props = {
 
 type Item = {
   id: string;
-  title: string;
+  value: string;
   description: string;
+  type?: "text" | "image";
 };
 
 export const ClaimsSelector = ({
@@ -88,25 +89,47 @@ export const ClaimsSelector = ({
     onToggle?.(!expanded);
   };
 
-  const body = items.map((item, index) => (
-    <Fragment key={item.id}>
-      {index !== 0 && <Divider />}
-      {selectionEnabled ? (
-        <ListItemCheckbox
-          value={item.title}
-          description={item.description}
-          selected={selectedItemIds?.includes(item.id)}
-          onValueChange={
-            onItemSelected
-              ? selected => onItemSelected(item, selected)
-              : undefined
-          }
-        />
-      ) : (
-        <ListItemInfo reversed value={item.title} label={item.description} />
-      )}
-    </Fragment>
-  ));
+  const renderClaimItem = (item: Item, index: number) => {
+    const { id, value, description, type = "text" } = item;
+    return (
+      <Fragment key={id}>
+        {index !== 0 && <Divider />}
+        {
+          // We do not support checkbox selection for images, as it is not needed now
+          selectionEnabled && type === "text" ? (
+            <ListItemCheckbox
+              value={value}
+              description={description}
+              selected={selectedItemIds?.includes(id)}
+              onValueChange={
+                onItemSelected
+                  ? selected => onItemSelected(item, selected)
+                  : undefined
+              }
+            />
+          ) : (
+            <ListItemInfo
+              value={
+                type === "image" ? (
+                  <Image
+                    source={{ uri: value }}
+                    style={styles.imageClaim}
+                    resizeMode="contain"
+                    accessibilityIgnoresInvertColors
+                  />
+                ) : (
+                  value
+                )
+              }
+              label={description}
+              accessibilityRole={type}
+              reversed
+            />
+          )
+        }
+      </Fragment>
+    );
+  };
 
   return (
     <View
@@ -141,7 +164,7 @@ export const ClaimsSelector = ({
           style={[bodyInnerStyle, styles.bodyInnerContainer]}
           onLayout={onBodyLayout}
         >
-          {body}
+          {items.map(renderClaimItem)}
         </View>
       </Animated.View>
 
@@ -181,5 +204,9 @@ const styles = StyleSheet.create({
     // Avoid gradient overlaps with border radius
     left: accordionBodySpacing,
     right: accordionBodySpacing
+  },
+  imageClaim: {
+    width: 160,
+    aspectRatio: 3 / 4
   }
 });

package/src/components/claimsSelector/__test__/ClaimsSelector.test.tsx

@@ -11,7 +11,7 @@ describe("ClaimsSelector", () => {
         items={[
           {
             id: "name",
-            title: "Mario Rossi",
+            value: "Mario Rossi",
             description: "Nome e cognome"
           }
         ]}
@@ -27,7 +27,7 @@ describe("ClaimsSelector", () => {
         items={[
           {
             id: "name",
-            title: "Mario Rossi",
+            value: "Mario Rossi",
             description: "Nome e cognome"
           }
         ]}
@@ -44,7 +44,7 @@ describe("ClaimsSelector", () => {
         items={[
           {
             id: "name",
-            title: "Mario Rossi",
+            value: "Mario Rossi",
             description: "Nome e cognome"
           }
         ]}
@@ -52,4 +52,22 @@ describe("ClaimsSelector", () => {
     );
     expect(claimsSelector).toMatchSnapshot();
   });
+
+  it("ClaimsSelector Snapshot (custom component)", () => {
+    const claimsSelector = TestRenderer.create(
+      <ClaimsSelector
+        title="Patente di guida"
+        selectionEnabled={false}
+        items={[
+          {
+            id: "name",
+            value: "data:image/png;base64,iVBORw0KGgoAAAANSUh",
+            description: "Nome e cognome",
+            type: "image"
+          }
+        ]}
+      />
+    );
+    expect(claimsSelector).toMatchSnapshot();
+  });
 });

package/src/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -523,6 +523,300 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
 </View>
 `;
 
+exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
+<View
+  style={
+    [
+      {
+        "borderCurve": "continuous",
+        "borderRadius": 8,
+        "borderWidth": 1,
+      },
+      {
+        "backgroundColor": "#F4F5F8",
+        "borderColor": "#E8EBF1",
+      },
+    ]
+  }
+>
+  <RNGestureHandlerButton
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    exclusive={true}
+    handlerTag={4}
+    handlerType="NativeViewGestureHandler"
+    innerRef={null}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    rippleColor="transparent"
+    style={
+      [
+        undefined,
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    touchSoundDisabled={false}
+  >
+    <View
+      accessibilityLabel="Patente di guida"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "expanded": false,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      style={{}}
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "padding": 16,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={true}
+          dynamicTypeRamp="headline"
+          maxFontSizeMultiplier={1.5}
+          style={
+            [
+              {},
+              {
+                "color": "#0E0F13",
+                "fontFamily": "Titillio",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": 24,
+              },
+            ]
+          }
+        >
+          Patente di guida
+        </Text>
+        <View
+          style={
+            {
+              "transform": [
+                {
+                  "rotate": "0deg",
+                },
+              ],
+            }
+          }
+        >
+          <RNSVGSvgView
+            accessibilityElementsHidden={true}
+            accessibilityLabel=""
+            accessible={false}
+            align="xMidYMid"
+            bbHeight={24}
+            bbWidth={24}
+            color="#0B3EE3"
+            focusable={false}
+            height={24}
+            importantForAccessibility="no-hide-descendants"
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "flex": 0,
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
+            }
+            vbHeight={24}
+            vbWidth={24}
+            width={24}
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGPath
+                clipRule={0}
+                d="M18.7071 8.29289c.3905.39053.3905 1.02369 0 1.41422l-6 5.99999c-.3905.3905-1.0237.3905-1.4142 0L5.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L12 13.5858l5.2929-5.29291c.3905-.39052 1.0237-.39052 1.4142 0Z"
+                fill={
+                  {
+                    "type": 2,
+                  }
+                }
+                fillRule={0}
+                propList={
+                  [
+                    "fill",
+                    "fillRule",
+                  ]
+                }
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+  <View
+    style={
+      [
+        {
+          "height": 0,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
+    }
+  >
+    <View
+      onLayout={[Function]}
+      style={
+        [
+          {
+            "padding": 16,
+            "paddingTop": 0,
+            "position": "absolute",
+            "width": "100%",
+          },
+          {
+            "width": "100%",
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="Nome e cognome; "
+        accessibilityRole="image"
+        accessible={true}
+        style={
+          {
+            "marginHorizontal": -24,
+            "paddingHorizontal": 24,
+            "paddingVertical": 12,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              {
+                "columnGap": 12,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column-reverse",
+                }
+              }
+            >
+              <Text
+                allowFontScaling={true}
+                dynamicTypeRamp="footnote"
+                maxFontSizeMultiplier={1.5}
+                style={
+                  [
+                    {},
+                    {
+                      "color": "#555C70",
+                      "fontFamily": "Titillio",
+                      "fontSize": 14,
+                      "fontStyle": "normal",
+                      "fontWeight": "400",
+                      "lineHeight": 21,
+                    },
+                  ]
+                }
+              >
+                Nome e cognome
+              </Text>
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                resizeMode="contain"
+                source={
+                  {
+                    "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUh",
+                  }
+                }
+                style={
+                  {
+                    "aspectRatio": 0.75,
+                    "width": 160,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <BVLinearGradient
+    colors={
+      [
+        16053752,
+        4294243832,
+      ]
+    }
+    endPoint={
+      {
+        "x": 0.5,
+        "y": 1,
+      }
+    }
+    locations={null}
+    startPoint={
+      {
+        "x": 0.5,
+        "y": 0,
+      }
+    }
+    style={
+      {
+        "bottom": 0,
+        "height": 16,
+        "left": 16,
+        "position": "absolute",
+        "right": 16,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
 <View
   style={
@@ -1158,6 +1452,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
     >
       <View
         accessibilityLabel="Nome e cognome; Mario Rossi"
+        accessibilityRole="text"
         accessible={true}
         style={
           {

package/src/components/searchInput/SearchInput.tsx

@@ -36,7 +36,11 @@ import {
   useIONewTypeface,
   useIOTheme
 } from "../../core";
-import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
+import {
+  IOFontSize,
+  IOMaxFontSizeMultiplier,
+  makeFontStyleObject
+} from "../../utils/fonts";
 import { Icon, IOIconSizeScale } from "../icons";
 import {
   buttonTextFontSize,
@@ -46,6 +50,7 @@ import {
 
 /* Component visual attributes */
 const inputPaddingHorizontal: IOSpacingScale = 12;
+const inputPaddingVertical: IOSpacingScale = 8;
 const inputPaddingClearButton: IOSpacingScale = 8;
 const inputRadius: number = 8;
 const iconMargin: IOSpacingScale = 8;
@@ -54,8 +59,6 @@ const iconCloseSize: IOIconSizeScale = 24;
 const inputFontSizePlaceholder: IOFontSize = 14;
 const cancelButtonMargin: IOSpacingScale = 16;
 const inputTransitionDuration: number = 250;
-const inputHeightIOS: number = 36;
-const inputHeightAndroid: number = 42;
 
 type SearchInputPressableProps = {
   onPress: (event: GestureResponderEvent) => void;
@@ -260,6 +263,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             returnKeyType="search"
             accessibilityRole={"search"}
             accessibilityLabel={accessibilityLabel}
+            numberOfLines={1}
             style={[
               {
                 color: IOColors[theme["textBody-default"]],
@@ -284,7 +288,9 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             onChangeText={handleChangeText}
             value={value}
             autoFocus={autoFocus}
+            maxFontSizeMultiplier={IOMaxFontSizeMultiplier}
           />
+
           <AnimatedPressable
             style={[styles.clearButton, clearButtonAnimatedStyle]}
             onPress={handleClear}
@@ -358,10 +364,11 @@ const styles = StyleSheet.create({
     flexGrow: 1
   },
   textInputIOS: {
-    height: inputHeightIOS
+    paddingVertical: inputPaddingVertical
   },
   textInputAndroid: {
-    height: inputHeightAndroid
+    textAlignVertical: "center",
+    overflow: "hidden"
   },
   iconContainer: {
     marginRight: iconMargin
@@ -372,6 +379,7 @@ const styles = StyleSheet.create({
     paddingLeft: cancelButtonMargin
   },
   clearButton: {
+    transformOrigin: "center",
     marginLeft: iconMargin
   }
 });