@pagopa/io-app-design-system 5.6.2 → 5.6.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/icons/Icon.tsx

@@ -206,6 +206,7 @@ import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
+import IconDocumentAdd from "./svg/IconDocumentAdd";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -252,6 +253,7 @@ export const IOIcons = {
   security: IconSecurity,
   option: IconOption,
   key: IconKey,
+  documentAdd: IconDocumentAdd,
   docGiacenza: IconDocGiacenza,
   docPaymentTitle: IconDocPaymentTitle,
   docPaymentCode: IconDocPaymentCode,
@@ -530,11 +532,12 @@ export const AnimatedIconWithColorTransition = Animated.createAnimatedComponent(
 */
 
 /* New icons */
-const { sparkles, profileRegistered } = IOIcons;
+const { sparkles, profileRegistered, documentAdd } = IOIcons;
 
 export const IOIconsNew = {
   sparkles,
-  profileRegistered
+  profileRegistered,
+  documentAdd
 };
 
 /* Navigation */

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+const IconDocumentAdd = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      d="M5.065 2.5a.532.532 0 0 0-.532.532v3.501H1.032a.532.532 0 0 0 0 1.064h3.5v3.502a.532.532 0 0 0 1.064 0V7.597h3.502a.532.532 0 0 0 0-1.064H5.596V3.032a.532.532 0 0 0-.531-.532Z"
+    />
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.033 3.032a1.032 1.032 0 0 1 2.063 0v3.001h3.002a1.032 1.032 0 0 1 0 2.064H6.096v3.002a1.032 1.032 0 1 1-2.063 0V8.097H1.032a1.032 1.032 0 0 1 0-2.064h3V3.032ZM5.065 3a.032.032 0 0 0-.032.032v4.001H1.032a.032.032 0 0 0 0 .064h4v4.002a.032.032 0 1 0 .064 0V7.097h4.002a.032.032 0 0 0 0-.064H5.096V3.032A.032.032 0 0 0 5.065 3Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10.845 5.5H20.3a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V13h2v6.5a1 1 0 0 0 1 1h13.3a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-9.455v-2Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M15.5 16.5h-8v-2h8v2ZM18.5 19.5h-11v-2h11v2Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="currentColor"
+      d="M19.5 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
+    />
+  </Svg>
+);
+
+export default IconDocumentAdd;

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

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="#BBC2D6" d="M5.065 2.5a.532.532 0 0 0-.532.532v3.501H1.032a.532.532 0 0 0 0 1.064h3.5v3.502a.532.532 0 0 0 1.064 0V7.597h3.502a.532.532 0 0 0 0-1.064H5.596V3.032a.532.532 0 0 0-.531-.532Z"/>
+  <path fill="#BBC2D6" fill-rule="evenodd" d="M4.033 3.032a1.032 1.032 0 0 1 2.063 0v3.001h3.002a1.032 1.032 0 0 1 0 2.064H6.096v3.002a1.032 1.032 0 1 1-2.063 0V8.097H1.032a1.032 1.032 0 0 1 0-2.064h3V3.032ZM5.065 3a.032.032 0 0 0-.032.032v4.001H1.032a.032.032 0 0 0 0 .064h4v4.002a.032.032 0 1 0 .064 0V7.097h4.002a.032.032 0 0 0 0-.064H5.096V3.032A.032.032 0 0 0 5.065 3Z" clip-rule="evenodd"/>
+  <path fill="#BBC2D6" fill-rule="evenodd" d="M10.845 5.5H20.3a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V13h2v6.5a1 1 0 0 0 1 1h13.3a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-9.455v-2Z" clip-rule="evenodd"/>
+  <path fill="#BBC2D6" fill-rule="evenodd" d="M15.5 16.5h-8v-2h8v2ZM18.5 19.5h-11v-2h11v2Z" clip-rule="evenodd"/>
+  <path fill="#BBC2D6" d="M19.5 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+</svg>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -32,12 +32,15 @@ type HeaderActionsProp =
   | readonly [HeaderActionProps, HeaderActionProps] // Two actions
   | readonly [HeaderActionProps, HeaderActionProps, HeaderActionProps]; // Three actions
 
+type Variant = "primary" | "contrast";
+
 export type HeaderFirstLevel = WithTestID<{
   title: string;
   actions: HeaderActionsProp;
   animatedRef?: AnimatedRef<Animated.ScrollView>;
   animatedFlatListRef?: AnimatedRef<Animated.FlatList<any>>;
   ignoreSafeAreaMargin?: boolean;
+  variant?: Variant;
 }>;
 
 const styles = StyleSheet.create({
@@ -65,12 +68,14 @@ export const HeaderFirstLevel = ({
   actions = [],
   ignoreSafeAreaMargin = false,
   animatedRef,
+  variant = "primary",
   animatedFlatListRef
 }: HeaderFirstLevel) => {
   const titleRef = createRef<View>();
   const insets = useSafeAreaInsets();
   const theme = useIOTheme();
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
+  const isPrimary = variant === "primary";
 
   useLayoutEffect(() => {
     const reactNode = findNodeHandle(titleRef.current);
@@ -105,14 +110,18 @@ export const HeaderFirstLevel = ({
   return (
     <Animated.View
       style={[
-        { backgroundColor: IOColors[theme["appBackground-primary"]] },
+        {
+          backgroundColor: isPrimary
+            ? IOColors[theme["appBackground-primary"]]
+            : IOColors[theme["appBackground-accent"]]
+        },
         animatedStyle
       ]}
       accessibilityRole="header"
       testID={testID}
     >
       {/* Divider */}
-      {(animatedRef || animatedFlatListRef) && (
+      {(animatedRef || animatedFlatListRef) && isPrimary && (
         <Animated.View
           style={[
             {
@@ -130,7 +139,11 @@ export const HeaderFirstLevel = ({
             weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
-            color={theme["textHeading-default"]}
+            color={
+              isPrimary
+                ? theme["textHeading-default"]
+                : theme["textHeading-constrast"]
+            }
             maxFontSizeMultiplier={1.25}
           >
             {title}
@@ -141,7 +154,7 @@ export const HeaderFirstLevel = ({
             <IconButton
               key={`header-first-level-action-${index}`}
               {...action}
-              color={"primary"}
+              color={variant}
             />
           ))}
         </HStack>

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
   }
 });

package/src/core/IOColors.ts

@@ -221,6 +221,7 @@ const themeKeys = [
   "textHeading-default",
   "textHeading-secondary",
   "textHeading-tertiary",
+  "textHeading-constrast",
   "textBody-default",
   "textBody-secondary",
   "textBody-tertiary",
@@ -294,6 +295,7 @@ export const IOThemeLight: IOTheme = {
   "textHeading-default": "black",
   "textHeading-secondary": "grey-850",
   "textHeading-tertiary": "grey-700",
+  "textHeading-constrast": "white",
   "textBody-default": "black",
   "textBody-secondary": "grey-850",
   "textBody-tertiary": "grey-700",