Merge branch 'main' into IOAPPX-352-add-new-titillio-typeface

pagopa · Nov 8, 2024 · 57d5560 · 57d5560
2 parents 840e3ff + 1b58e30
commit 57d5560
Show file tree

Hide file tree

Showing 21 changed files with 1,201 additions and 108 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v2.0.5](https://github.com/pagopa/io-app-design-system/compare/v2.1.0-3...v2.0.5)
+
+- [EUDIW-154] Add `NavQrWallet` icon [`#349`](https://github.com/pagopa/io-app-design-system/pull/349)
+- [IOAPPX-403] Action in banner is not announced by screen reader on Android [`#342`](https://github.com/pagopa/io-app-design-system/pull/342)
+- [IOAPPX-408] Fix alignment of `Alert` icon when there's a line of content [`#338`](https://github.com/pagopa/io-app-design-system/pull/338)
+- [IOAPPX-410] Migrate `ComposedBodyFromArray` from `io-app` [`#340`](https://github.com/pagopa/io-app-design-system/pull/340)
+- chore: release 2.0.4 [`21f6ec4`](https://github.com/pagopa/io-app-design-system/commit/21f6ec460b471a97ee74c4b1675e3a16e11a97d4)
+
 #### [v2.1.0-3](https://github.com/pagopa/io-app-design-system/compare/v2.1.0-2...v2.1.0-3)
 
+> 22 October 2024
+
 - Update some `Module…` components to avoid notable size changes [`5b72d5e`](https://github.com/pagopa/io-app-design-system/commit/5b72d5e4ecd24727cb43efd71b49b1f352ff4e07)
+- chore: release 2.1.0-3 [`840e3ff`](https://github.com/pagopa/io-app-design-system/commit/840e3ff23d72cd3c46cd06a5a9fd4e2964859f18)
 
 #### [v2.1.0-2](https://github.com/pagopa/io-app-design-system/compare/v2.1.0-1...v2.1.0-2)
 
@@ -21,7 +32,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Increase size of `H6` [`4160005`](https://github.com/pagopa/io-app-design-system/commit/4160005955a3d4f3a44e0351f913f578d22ebeda)
 - chore: release 2.1.0-1 [`978ced8`](https://github.com/pagopa/io-app-design-system/commit/978ced852dbfc4dd95ef44a20ccec1bd55147c0a)
 
-#### [v2.1.0-0](https://github.com/pagopa/io-app-design-system/compare/v2.0.3...v2.1.0-0)
+#### [v2.1.0-0](https://github.com/pagopa/io-app-design-system/compare/v2.0.4...v2.1.0-0)
 
 > 22 October 2024
 
@@ -33,6 +44,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update `jest` snapshots [`01460f5`](https://github.com/pagopa/io-app-design-system/commit/01460f57478b68db7233f0e29b013400924d68c8)
 - chore: release 2.0.0 [`f0c4e41`](https://github.com/pagopa/io-app-design-system/commit/f0c4e41c4976af898127c5e9f9605f066bf9d015)
 
+#### [v2.0.4](https://github.com/pagopa/io-app-design-system/compare/v2.0.3...v2.0.4)
+
+> 24 October 2024
+
+- [IOAPPX-410] Migrate `ComposedBodyFromArray` from `io-app` [`#340`](https://github.com/pagopa/io-app-design-system/pull/340)
+- chore: release 2.0.4 [`21f6ec4`](https://github.com/pagopa/io-app-design-system/commit/21f6ec460b471a97ee74c4b1675e3a16e11a97d4)
+
 #### [v2.0.3](https://github.com/pagopa/io-app-design-system/compare/v2.0.2...v2.0.3)
 
 > 21 October 2024
@@ -318,34 +336,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 > 29 May 2024
 
-- [IOPAE-1195] Add `AvatarSearch` component [`#274`](https://github.com/pagopa/io-app-design-system/pull/274)
-- chore: [IOBP-655] Add new `workInProgress` pictogram [`#272`](https://github.com/pagopa/io-app-design-system/pull/272)
-- chore: [IOBP-654] Add paymentLogoIcon attribute to the `ListItemInfo` [`#270`](https://github.com/pagopa/io-app-design-system/pull/270)
-- [IOAPPX-301] Add the new `satispay` payment logo (both small and big) [`#269`](https://github.com/pagopa/io-app-design-system/pull/269)
-- chore: [IOBP-641] Add `ListItemHeader` a11y role as heading [`#268`](https://github.com/pagopa/io-app-design-system/pull/268)
-- [IOAPPX-288] Add Markdown specific typographic scale [`#246`](https://github.com/pagopa/io-app-design-system/pull/246)
-- [IOAPPX-283] Deprecate `GradientScrollView` for `IOScrollView` [`#243`](https://github.com/pagopa/io-app-design-system/pull/243)
-- [IOAPPX-289] Delete unused colors from `IOColors` [`#258`](https://github.com/pagopa/io-app-design-system/pull/258)
-- [IOAPPX-298] Fix the value of the H4 line height [`#267`](https://github.com/pagopa/io-app-design-system/pull/267)
-- [IOPAE-1166] Add `numberOfLines` prop to `ListItemNav` component [`#266`](https://github.com/pagopa/io-app-design-system/pull/266)
-- [IOPLT-485] Propagate ref attribute to all Typographic components [`#264`](https://github.com/pagopa/io-app-design-system/pull/264)
-- fix: properly propagate testID to children [`#262`](https://github.com/pagopa/io-app-design-system/pull/262)
-- [IOAPPX-293] Uniform spacing between list items, modules, and selection components [`#259`](https://github.com/pagopa/io-app-design-system/pull/259)
-- [IOAPPX-294] Add `activate` and `reactivate` bleed pictograms [`#261`](https://github.com/pagopa/io-app-design-system/pull/261)
-- chore: [PE-594] Remove marginLeft from `ListItemNav` chevron icon [`#260`](https://github.com/pagopa/io-app-design-system/pull/260)
-- [IOPID-1825] Add accessibility label to idp module component [`#257`](https://github.com/pagopa/io-app-design-system/pull/257)
-- [chore] Add optional `switchTestID` to `ListItemSwitch` [`#256`](https://github.com/pagopa/io-app-design-system/pull/256)
-- chore: [PE-578] Add new variant to the `Tag` component [`#255`](https://github.com/pagopa/io-app-design-system/pull/255)
-- chore: release 1.37.0 [`ce1451a`](https://github.com/pagopa/io-app-design-system/commit/ce1451ade1ffee799e7d1b52b890370ad0d5f1f6)
-- chore: release 1.36.14 [`f02d0dd`](https://github.com/pagopa/io-app-design-system/commit/f02d0dd74fb715be4762220581267b52cfabba2d)
-- chore: release 1.36.11 [`98bd412`](https://github.com/pagopa/io-app-design-system/commit/98bd4123dfaaedb544d87c556a461b63d0adc21a)
+- chore: release 1.37.1 [`4ef7e61`](https://github.com/pagopa/io-app-design-system/commit/4ef7e61e76aa50a4dbea5c3165544269c9fee3ef)
+- add `images.d.ts` for importing PNG images [`ece78f7`](https://github.com/pagopa/io-app-design-system/commit/ece78f77679a9c703c019a89a13d03b3aea7d6d3)
 
 #### [v1.37.0](https://github.com/pagopa/io-app-design-system/compare/v1.36.15...v1.37.0)
 
-> 2 May 2024
+> 29 May 2024
 
-- chore: Add new variant to the `Tag` component [`ec9d386`](https://github.com/pagopa/io-app-design-system/commit/ec9d3863c89e1042b5426c0e1026dbbe2e0bee60)
-- chore: release 1.37.0 [`026ca97`](https://github.com/pagopa/io-app-design-system/commit/026ca975a6ec22a1874a699b75de7ecd032b5c26)
+- [IOPAE-1195] Add `AvatarSearch` component [`#274`](https://github.com/pagopa/io-app-design-system/pull/274)
+- chore: [IOBP-655] Add new `workInProgress` pictogram [`#272`](https://github.com/pagopa/io-app-design-system/pull/272)
+- chore: [IOBP-654] Add paymentLogoIcon attribute to the `ListItemInfo` [`#270`](https://github.com/pagopa/io-app-design-system/pull/270)
+- chore: release 1.37.0 [`ce1451a`](https://github.com/pagopa/io-app-design-system/commit/ce1451ade1ffee799e7d1b52b890370ad0d5f1f6)
 
 #### [v1.36.15](https://github.com/pagopa/io-app-design-system/compare/v1.36.14...v1.36.15)
 

diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx
@@ -1,6 +1,8 @@
 import {
-  FeatureInfo,
   Banner,
+  BodyProps,
+  ComposedBodyFromArray,
+  FeatureInfo,
   H2,
   IOPictogramsBleed,
   IOVisualCostants,
@@ -46,62 +48,75 @@ export const DSAdvice = () => (
   </Screen>
 );
 
-const renderFeatureInfo = () => (
-  <>
-    <H2 style={{ marginBottom: 16 }}>FeatureInfo</H2>
-    <ComponentViewerBox name="FeatureInfo · with Icon">
-      <FeatureInfo
-        iconName="info"
-        body={
-          "Dopo questo passaggio non sarà più possibile annullare il pagamento"
-        }
-      />
-      <VSpacer size={24} />
-      <FeatureInfo
-        iconName="gallery"
-        body={
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua"
-        }
-      />
-      <VSpacer size={24} />
-      <FeatureInfo
-        iconName="security"
-        action={{
-          label:
-            "Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper",
-          onPress: onLinkPress
-        }}
-      />
-    </ComponentViewerBox>
-    <VSpacer size={16} />
-    <ComponentViewerBox name="FeatureInfo · with Pictogram">
-      <FeatureInfo
-        pictogramName="clock"
-        body={
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
-        }
-      />
-      <VSpacer size={24} />
-      <FeatureInfo
-        pictogramName="manual"
-        body={
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua"
-        }
-      />
-      <VSpacer size={24} />
-      <FeatureInfo
-        pictogramName="followMessage"
-        body={
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
-        }
-        action={{
-          label: "Scopri di più",
-          onPress: onLinkPress
-        }}
-      />
-    </ComponentViewerBox>
-  </>
-);
+const renderFeatureInfo = () => {
+  const composedBody: Array<BodyProps> = [
+    {
+      text: "Questa è la prima parte del testo. "
+    },
+    {
+      text: "Questa la seconda parte in grassetto. ",
+      weight: "Bold"
+    },
+    {
+      text: "Questa la terza parte che torna "
+    }
+  ];
+
+  return (
+    <>
+      <H2 style={{ marginBottom: 16 }}>FeatureInfo</H2>
+      <ComponentViewerBox name="FeatureInfo · with Icon">
+        <FeatureInfo
+          iconName="info"
+          body={
+            "Dopo questo passaggio non sarà più possibile annullare il pagamento"
+          }
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="gallery"
+          body={<ComposedBodyFromArray textAlign="left" body={composedBody} />}
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="security"
+          action={{
+            label:
+              "Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper",
+            onPress: onLinkPress
+          }}
+        />
+      </ComponentViewerBox>
+      <VSpacer size={16} />
+      <ComponentViewerBox name="FeatureInfo · with Pictogram">
+        <FeatureInfo
+          pictogramName="clock"
+          body={
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
+          }
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          pictogramName="manual"
+          body={
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua"
+          }
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          pictogramName="followMessage"
+          body={
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
+          }
+          action={{
+            label: "Scopri di più",
+            onPress: onLinkPress
+          }}
+        />
+      </ComponentViewerBox>
+    </>
+  );
+};
 
 const renderBanner = () => (
   <>

diff --git a/example/src/pages/Alert.tsx b/example/src/pages/Alert.tsx
@@ -153,6 +153,11 @@ export const DSAlert = () => {
       >
         Content only
       </H3>
+
+      <Alert ref={viewRef} variant="error" content="Ut enim ad minim veniam" />
+
+      <VSpacer />
+
       <Alert
         ref={viewRef}
         variant="error"
@@ -183,6 +188,10 @@ export const DSAlert = () => {
         content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid"
       />
 
+      <VSpacer />
+
+      <Alert ref={viewRef} variant="success" content="Single line" />
+
       <VSpacer size={40} />
 
       <H3 color={"bluegrey"} style={{ marginBottom: 16 }}>

diff --git a/scripts/icons_timestamp.txt b/scripts/icons_timestamp.txt
@@ -1 +1 @@
-2024-09-10T13:44:34.556Z
+2024-11-07T11:37:53.800Z
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
@@ -1,13 +1,16 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import {
   GestureResponderEvent,
+  NativeSyntheticEvent,
   PixelRatio,
   Pressable,
   StyleSheet,
+  TextLayoutEventData,
   View
 } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
+  SharedValue,
   interpolate,
   useAnimatedStyle,
   useDerivedValue,
@@ -119,7 +122,16 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+    const isPressed: SharedValue<number> = useSharedValue(0);
+
+    const [isMultiline, setIsMultiline] = useState(false);
+
+    const onTextLayout = useCallback(
+      (event: NativeSyntheticEvent<TextLayoutEventData>) => {
+        setIsMultiline(event.nativeEvent.lines.length > 1);
+      },
+      []
+    );
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -136,7 +148,7 @@ export const Alert = React.forwardRef<View, AlertType>(
         progressPressed.value,
         [0, 1],
         [1, animationScaleValue],
-        Extrapolate.CLAMP
+        Extrapolation.CLAMP
       );
 
       return {
@@ -155,7 +167,12 @@ export const Alert = React.forwardRef<View, AlertType>(
 
     const renderMainBlock = () => (
       <>
-        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+        <View
+          style={{
+            marginRight: IOVisualCostants.iconMargin,
+            alignSelf: "flex-start"
+          }}
+        >
           <Icon
             name={mapVariantStates[variant].icon}
             size={iconSize}
@@ -168,8 +185,10 @@ export const Alert = React.forwardRef<View, AlertType>(
       Tested on both Android and iOS. */}
         <View
           style={[
-            !title && { marginTop: -5 * PixelRatio.getFontScale() },
-            { marginBottom: -3 * PixelRatio.getFontScale(), flex: 1 }
+            !title &&
+              isMultiline && { marginTop: -5 * PixelRatio.getFontScale() },
+            isMultiline && { marginBottom: -3 * PixelRatio.getFontScale() },
+            { flex: 1 }
           ]}
         >
           {title && (
@@ -182,6 +201,7 @@ export const Alert = React.forwardRef<View, AlertType>(
             color={mapVariantStates[variant].foreground}
             weight={"Regular"}
             accessibilityRole="text"
+            onTextLayout={onTextLayout}
           >
             {content}
           </Label>

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -157,7 +157,7 @@ export const Banner = ({
   onClose,
   accessibilityHint,
   accessibilityLabel,
-  testID
+  testID,
 }: Banner) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
@@ -195,13 +195,17 @@ export const Banner = ({
     isPressed.value = 0;
   }, [isPressed]);
 
+  /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
+   if they are present. */
+  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
+
   const renderMainBlock = () => (
     <>
       <View
         style={[IOStyles.flex, IOStyles.selfCenter]}
         accessible={true}
         // A11y related props
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole={action !== undefined ? "button" : undefined}
       >

diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
     }
   >
     <View
+      accessibilityLabel="Action text"
       accessibilityRole="button"
       accessible={true}
       style={
@@ -407,6 +408,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
     }
   >
     <View
+      accessibilityLabel="Action text"
       accessibilityRole="button"
       accessible={true}
       style={

diff --git a/src/components/banner/__test__/banner.test.tsx b/src/components/banner/__test__/banner.test.tsx
@@ -18,6 +18,7 @@ describe("Test Banner Components", () => {
         pictogramName="charity"
         action="Action text"
         onPress={onLinkPress}
+        accessibilityLabel="Action text"
       />
     ).toJSON();
     expect(advice).toMatchSnapshot();
@@ -34,6 +35,7 @@ describe("Test Banner Components - Experimental Enabled", () => {
         pictogramName="charity"
         action="Action text"
         onPress={onLinkPress}
+        accessibilityLabel="Action text"
       />
     ).toJSON();
     expect(advice).toMatchSnapshot();