@pagopa/io-app-design-system 4.5.6 → 4.6.1

package/lib/typescript/hooks/useAccordionAnimation.d.ts

@@ -0,0 +1,41 @@
+import { type LayoutChangeEvent } from "react-native";
+type Params = {
+    defaultExpanded?: boolean;
+};
+export declare const useAccordionAnimation: ({ defaultExpanded }?: Params) => {
+    expanded: boolean;
+    /**
+     * Toggle the accordion expanded/collapsed state.
+     */
+    toggleAccordion: () => void;
+    /**
+     * The style to apply to the accordion icon.
+     */
+    iconAnimatedStyle: {
+        transform: {
+            rotate: "0deg" | "180deg";
+        }[];
+    };
+    /**
+     * Callback to execute on the body's inner container layout.
+     */
+    onBodyLayout: (event: LayoutChangeEvent) => void;
+    /**
+     * The animated style to apply to the collapsible body container – it must be an `Animated.View`.
+     */
+    bodyAnimatedStyle: ({
+        overflow: "hidden";
+    } | {
+        height: number;
+    })[];
+    /**
+     * The style to apply to the inner body container.
+     */
+    bodyInnerStyle: {
+        position: "absolute";
+        padding: 16;
+        paddingTop: number;
+    };
+};
+export {};
+//# sourceMappingURL=useAccordionAnimation.d.ts.map

package/lib/typescript/hooks/useAccordionAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccordionAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccordionAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAUlE,KAAK,MAAM,GAAG;IACZ,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAE/B,MAAM;;IAwDL;;OAEG;;IAEH;;OAEG;;;;;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;IAEH;;OAEG;;;;;;CAGN,CAAC"}

package/lib/typescript/index.d.ts

@@ -3,5 +3,6 @@ export * from "./core";
 export * from "./functions";
 export * from "./hooks";
 export * from "./utils/fonts";
+export * from "./utils/accessibility";
 export * from "./utils/types";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.5.6",
+  "version": "4.6.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/accordion/AccordionItem.tsx

@@ -1,23 +1,15 @@
-import React, { useState } from "react";
-import {
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View
-} from "react-native";
+import React from "react";
+import { StyleSheet, TouchableWithoutFeedback, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import Animated, {
-  useAnimatedStyle,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
   IOAccordionRadius,
   IOStyles,
   useIOTheme,
   type IOSpacingScale
 } from "../../core";
-import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
+import { useAccordionAnimation } from "../../hooks/useAccordionAnimation";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons/Icon";
 import { Body, H6 } from "../typography";
 
@@ -28,11 +20,6 @@ export type AccordionItem = {
   icon?: IOIcons;
 };
 
-type AccordionBody = {
-  children: React.ReactNode;
-  expanded: boolean;
-};
-
 const accordionBodySpacing: IOSpacingScale = 16;
 const accordionIconMargin: IOSpacingScale = 12;
 const accordionChevronMargin: IOSpacingScale = 8;
@@ -40,40 +27,6 @@ const accordionChevronMargin: IOSpacingScale = 8;
 // Icon size
 const iconSize: IOIconSizeScale = 24;
 
-/* The code below is a re-adaptation of Dima Portenko's code:
-https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
-*/
-export const AccordionBody = ({ children, expanded }: AccordionBody) => {
-  const [height, setHeight] = useState(0);
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    const { height: onLayoutHeight } = event.nativeEvent.layout;
-
-    if (onLayoutHeight > 0 && height !== onLayoutHeight) {
-      setHeight(onLayoutHeight);
-    }
-  };
-
-  const animatedHeightStyle = useAnimatedStyle(
-    () => ({
-      height: expanded
-        ? withSpring(height, IOSpringValues.accordion)
-        : withSpring(0, IOSpringValues.accordion)
-    }),
-    [expanded]
-  );
-
-  return (
-    <Animated.View
-      style={[animatedHeightStyle, styles.accordionCollapsableContainer]}
-    >
-      <View style={styles.accordionBodyContainer} onLayout={onLayout}>
-        {children}
-      </View>
-    </Animated.View>
-  );
-};
-
 export const AccordionItem = ({
   title,
   accessibilityLabel,
@@ -81,30 +34,21 @@ export const AccordionItem = ({
   icon
 }: AccordionItem) => {
   const theme = useIOTheme();
-  const [expanded, setExpanded] = useState(false);
+
+  const {
+    expanded,
+    toggleAccordion,
+    onBodyLayout,
+    iconAnimatedStyle,
+    bodyAnimatedStyle,
+    bodyInnerStyle
+  } = useAccordionAnimation();
 
   // Visual attributes
   const accordionBackground: IOColors = theme["appBackground-primary"];
   const accordionBorder: IOColors = theme["cardBorder-default"];
   const accordionIconColor: IOColors = theme["icon-decorative"];
 
-  const onItemPress = () => {
-    setExpanded(!expanded);
-  };
-
-  const animatedChevron = useAnimatedStyle(
-    () => ({
-      transform: [
-        {
-          rotate: expanded
-            ? withSpring(`180deg`, IOSpringValues.accordion)
-            : withSpring(`0deg`, IOSpringValues.accordion)
-        }
-      ]
-    }),
-    [expanded]
-  );
-
   return (
     <View
       style={[
@@ -120,7 +64,7 @@ export const AccordionItem = ({
         accessibilityRole="button"
         accessibilityState={{ expanded }}
         accessibilityLabel={accessibilityLabel ?? title}
-        onPress={onItemPress}
+        onPress={toggleAccordion}
       >
         <View style={styles.textContainer}>
           <View
@@ -146,7 +90,7 @@ export const AccordionItem = ({
               <H6 color={theme["textBody-default"]}>{title}</H6>
             </View>
           </View>
-          <Animated.View style={animatedChevron}>
+          <Animated.View style={iconAnimatedStyle}>
             <Icon
               name="chevronBottom"
               color={theme["interactiveElem-default"]}
@@ -155,9 +99,12 @@ export const AccordionItem = ({
         </View>
       </TouchableWithoutFeedback>
 
-      <AccordionBody expanded={expanded}>
-        {typeof body === "string" ? <Body>{body}</Body> : body}
-      </AccordionBody>
+      <Animated.View style={bodyAnimatedStyle}>
+        <View style={bodyInnerStyle} onLayout={onBodyLayout}>
+          {typeof body === "string" ? <Body>{body}</Body> : body}
+        </View>
+      </Animated.View>
+
       {/* This gradient adds a smooth end to the content. If it is missing,
       the content will be cut sharply during the height transition. */}
       <LinearGradient
@@ -185,14 +132,6 @@ const styles = StyleSheet.create({
     borderRadius: IOAccordionRadius,
     borderCurve: "continuous"
   },
-  accordionCollapsableContainer: {
-    overflow: "hidden"
-  },
-  accordionBodyContainer: {
-    position: "absolute",
-    padding: accordionBodySpacing,
-    paddingTop: 0
-  },
   textContainer: {
     padding: accordionBodySpacing,
     flexDirection: "row",

package/src/components/claimsSelector/ClaimsSelector.tsx

@@ -0,0 +1,185 @@
+import React, { Fragment } from "react";
+import { 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";
+import {
+  hexToRgba,
+  IOAccordionRadius,
+  IOColors,
+  IOSpacingScale,
+  useIOTheme
+} from "../../core";
+import { useAccordionAnimation } from "../../hooks/useAccordionAnimation";
+import { Divider } from "../divider";
+import { H6 } from "../typography";
+import { Icon } from "../icons";
+import { ListItemCheckbox, ListItemInfo } from "../listitems";
+
+const accordionBodySpacing: IOSpacingScale = 16;
+
+type Props = {
+  /**
+   * The accordion title.
+   */
+  title: string;
+  /**
+   * The list of items to display within the accordion.
+   */
+  items: Array<Item>;
+  /**
+   * Enable the selection of items with a checkbox.
+   * @default true
+   */
+  selectionEnabled?: boolean;
+  /**
+   * The IDs of the selected items, when the component is controlled.
+   */
+  selectedItemIds?: Array<string>;
+  /**
+   * Whether the accordion starts expanded.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Function called when a item is selected.
+   */
+  onItemSelected?: (item: Item, selected: boolean) => void;
+  /**
+   * Function called when the accordion is toggled to collapsed or expanded state.
+   */
+  onToggle?: (expanded: boolean) => void;
+  accessibilityLabel?: string;
+};
+
+type Item = {
+  id: string;
+  title: string;
+  description: string;
+};
+
+export const ClaimsSelector = ({
+  title,
+  items,
+  defaultExpanded,
+  onItemSelected,
+  onToggle,
+  accessibilityLabel,
+  selectedItemIds,
+  selectionEnabled = true
+}: Props) => {
+  const theme = useIOTheme();
+  const {
+    expanded,
+    toggleAccordion,
+    onBodyLayout,
+    iconAnimatedStyle,
+    bodyAnimatedStyle,
+    bodyInnerStyle
+  } = useAccordionAnimation({
+    defaultExpanded
+  });
+
+  const accordionBackground: IOColors = theme["appBackground-secondary"];
+  const accordionBorder: IOColors = theme["cardBorder-default"];
+
+  const onItemPress = () => {
+    toggleAccordion();
+    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>
+  ));
+
+  return (
+    <View
+      style={[
+        styles.accordionWrapper,
+        {
+          backgroundColor: IOColors[accordionBackground],
+          borderColor: IOColors[accordionBorder]
+        }
+      ]}
+    >
+      <TouchableWithoutFeedback
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityState={{ expanded }}
+        accessibilityLabel={accessibilityLabel ?? title}
+        onPress={onItemPress}
+      >
+        <View style={styles.textContainer}>
+          <H6 color={theme["textBody-default"]}>{title}</H6>
+          <Animated.View style={iconAnimatedStyle}>
+            <Icon
+              name="chevronBottom"
+              color={theme["interactiveElem-default"]}
+            />
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+
+      <Animated.View style={bodyAnimatedStyle}>
+        <View
+          style={[bodyInnerStyle, styles.bodyInnerContainer]}
+          onLayout={onBodyLayout}
+        >
+          {body}
+        </View>
+      </Animated.View>
+
+      {/* This gradient adds a smooth end to the content. If it is missing,
+      the content will be cut sharply during the height transition. */}
+      <LinearGradient
+        style={styles.linearGradient}
+        colors={[
+          hexToRgba(IOColors[accordionBackground], 0),
+          IOColors[accordionBackground]
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accordionWrapper: {
+    borderWidth: 1,
+    borderRadius: IOAccordionRadius,
+    borderCurve: "continuous"
+  },
+  textContainer: {
+    padding: accordionBodySpacing,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  bodyInnerContainer: {
+    width: "100%"
+  },
+  linearGradient: {
+    height: accordionBodySpacing,
+    position: "absolute",
+    // Place at the bottom
+    bottom: 0,
+    // Avoid gradient overlaps with border radius
+    left: accordionBodySpacing,
+    right: accordionBodySpacing
+  }
+});

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

@@ -0,0 +1,55 @@
+import React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { ClaimsSelector } from "../ClaimsSelector";
+
+describe("ClaimsSelector", () => {
+  it("ClaimsSelector Snapshot (controlled)", () => {
+    const claimsSelector = TestRenderer.create(
+      <ClaimsSelector
+        title="Patente di guida"
+        selectedItemIds={["name"]}
+        items={[
+          {
+            id: "name",
+            title: "Mario Rossi",
+            description: "Nome e cognome"
+          }
+        ]}
+      />
+    );
+    expect(claimsSelector).toMatchSnapshot();
+  });
+
+  it("ClaimsSelector Snapshot (uncontrolled)", () => {
+    const claimsSelector = TestRenderer.create(
+      <ClaimsSelector
+        title="Patente di guida"
+        items={[
+          {
+            id: "name",
+            title: "Mario Rossi",
+            description: "Nome e cognome"
+          }
+        ]}
+      />
+    );
+    expect(claimsSelector).toMatchSnapshot();
+  });
+
+  it("ClaimsSelector Snapshot (unselectable items)", () => {
+    const claimsSelector = TestRenderer.create(
+      <ClaimsSelector
+        title="Patente di guida"
+        selectionEnabled={false}
+        items={[
+          {
+            id: "name",
+            title: "Mario Rossi",
+            description: "Nome e cognome"
+          }
+        ]}
+      />
+    );
+    expect(claimsSelector).toMatchSnapshot();
+  });
+});