@pagopa/io-app-design-system 7.1.1 → 7.2.0

package/lib/module/components/claimsSelector/index.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export * from "./ClaimsSelector";
-//# sourceMappingURL=index.js.map

package/lib/module/components/claimsSelector/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/claimsSelector/index.tsx"],"mappings":";;AAAA,cAAc,kBAAkB","ignoreList":[]}

package/lib/typescript/components/claimsSelector/ClaimsSelector.d.ts

@@ -1,48 +0,0 @@
-import { ListItemInfo } from "../listitems";
-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;
-    /**
-     * Accordion header gradient colors.
-     */
-    headerGradientColors?: Array<string>;
-};
-type Item = {
-    id: string;
-    value: string;
-    description: string;
-    type?: "text" | "image";
-    endElement?: ListItemInfo["endElement"];
-};
-export declare const ClaimsSelector: ({ title, items, defaultExpanded, onItemSelected, onToggle, accessibilityLabel, selectedItemIds, selectionEnabled, headerGradientColors }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ClaimsSelector.d.ts.map

package/lib/typescript/components/claimsSelector/ClaimsSelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClaimsSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/claimsSelector/ClaimsSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAC;AAW9D,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,KAAK,IAAI,GAAG;IACV,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0IAU5B,KAAK,4CAoIP,CAAC"}

package/lib/typescript/components/claimsSelector/__test__/ClaimsSelector.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ClaimsSelector.test.d.ts.map

package/lib/typescript/components/claimsSelector/__test__/ClaimsSelector.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClaimsSelector.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/claimsSelector/__test__/ClaimsSelector.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/components/claimsSelector/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ClaimsSelector";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/claimsSelector/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/src/components/claimsSelector/ClaimsSelector.tsx

@@ -1,231 +0,0 @@
-import { Fragment } from "react";
-import { Image, StyleSheet, View } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
-import LinearGradient from "react-native-linear-gradient";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { useIOTheme } from "../../context";
-import { IOAccordionRadius, IOColors, IOSpacingScale } from "../../core";
-import { useAccordionAnimation } from "../../hooks/useAccordionAnimation";
-import { Icon } from "../icons";
-import { Divider } from "../layout";
-import { ListItemCheckbox, ListItemInfo } from "../listitems";
-import { H6 } from "../typography";
-
-const accordionBodySpacing: IOSpacingScale = 16;
-
-// Threshold to determine when the accordion is considered fully collapsed
-const COLLAPSED_RADIUS_THRESHOLD = 0.001;
-
-// Border width offset to ensure gradient fits within the border curves
-const COLLAPSIBLE_BORDER = 1;
-
-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;
-  /**
-   * Accordion header gradient colors.
-   */
-  headerGradientColors?: Array<string>;
-};
-
-type Item = {
-  id: string;
-  value: string;
-  description: string;
-  type?: "text" | "image";
-  endElement?: ListItemInfo["endElement"];
-};
-
-export const ClaimsSelector = ({
-  title,
-  items,
-  defaultExpanded,
-  onItemSelected,
-  onToggle,
-  accessibilityLabel,
-  selectedItemIds,
-  selectionEnabled = true,
-  headerGradientColors
-}: Props) => {
-  const theme = useIOTheme();
-  const {
-    expanded,
-    toggleAccordion,
-    onBodyLayout,
-    iconAnimatedStyle,
-    bodyAnimatedStyle,
-    bodyInnerStyle,
-    progress
-  } = useAccordionAnimation({
-    defaultExpanded
-  });
-
-  const accordionBackground: IOColors = theme["appBackground-primary"];
-  const accordionBorder: IOColors = theme["cardBorder-default"];
-
-  const onItemPress = () => {
-    toggleAccordion();
-    onToggle?.(!expanded);
-  };
-
-  const hasHeaderGradient =
-    headerGradientColors && headerGradientColors.length >= 2;
-
-  const headerForegroundColor: IOColors = hasHeaderGradient
-    ? "black"
-    : theme["textBody-default"];
-
-  const headerRadiusAnimatedStyle = useAnimatedStyle(() => {
-    /**
-     * Dynamically adjust bottom corner radius based on the expansion progress.
-     * Bottom corners are rounded only when the accordion is fully collapsed to
-     * ensure visual consistency with the outer container.
-     */
-    const bottomRadius =
-      progress.value < COLLAPSED_RADIUS_THRESHOLD ? IOAccordionRadius : 0;
-    return {
-      borderTopLeftRadius: IOAccordionRadius - COLLAPSIBLE_BORDER,
-      borderTopRightRadius: IOAccordionRadius - COLLAPSIBLE_BORDER,
-      borderBottomLeftRadius: bottomRadius - COLLAPSIBLE_BORDER,
-      borderBottomRightRadius: bottomRadius - COLLAPSIBLE_BORDER,
-      overflow: "hidden"
-    };
-  });
-
-  const renderClaimItem = (item: Item, index: number) => {
-    const { id, value, description, type = "text", endElement } = 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
-              endElement={endElement}
-            />
-          )
-        }
-      </Fragment>
-    );
-  };
-
-  return (
-    <View
-      style={[
-        styles.accordionWrapper,
-        {
-          backgroundColor: IOColors[accordionBackground],
-          borderColor: IOColors[accordionBorder]
-        }
-      ]}
-    >
-      <TouchableWithoutFeedback
-        accessible={true}
-        accessibilityRole="button"
-        accessibilityState={{ expanded }}
-        accessibilityLabel={accessibilityLabel ?? title}
-        onPress={onItemPress}
-      >
-        <Animated.View
-          style={[styles.textContainer, headerRadiusAnimatedStyle]}
-        >
-          {hasHeaderGradient && (
-            <LinearGradient
-              colors={headerGradientColors}
-              style={StyleSheet.absoluteFill}
-            />
-          )}
-          <H6 color={headerForegroundColor}>{title}</H6>
-          <Animated.View style={iconAnimatedStyle}>
-            <Icon name="chevronBottom" color={headerForegroundColor} />
-          </Animated.View>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-
-      <Animated.View style={bodyAnimatedStyle}>
-        <View
-          style={[bodyInnerStyle, styles.bodyInnerContainer]}
-          onLayout={onBodyLayout}
-        >
-          {items.map(renderClaimItem)}
-        </View>
-      </Animated.View>
-    </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%"
-  },
-  imageClaim: {
-    width: 160,
-    aspectRatio: 3 / 4
-  }
-});

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

@@ -1,72 +0,0 @@
-import { render } from "@testing-library/react-native";
-import { ClaimsSelector } from "../ClaimsSelector";
-
-describe("ClaimsSelector", () => {
-  it("ClaimsSelector Snapshot (controlled)", () => {
-    const { toJSON } = render(
-      <ClaimsSelector
-        title="Patente di guida"
-        selectedItemIds={["name"]}
-        items={[
-          {
-            id: "name",
-            value: "Mario Rossi",
-            description: "Nome e cognome"
-          }
-        ]}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it("ClaimsSelector Snapshot (uncontrolled)", () => {
-    const { toJSON } = render(
-      <ClaimsSelector
-        title="Patente di guida"
-        items={[
-          {
-            id: "name",
-            value: "Mario Rossi",
-            description: "Nome e cognome"
-          }
-        ]}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it("ClaimsSelector Snapshot (unselectable items)", () => {
-    const { toJSON } = render(
-      <ClaimsSelector
-        title="Patente di guida"
-        selectionEnabled={false}
-        items={[
-          {
-            id: "name",
-            value: "Mario Rossi",
-            description: "Nome e cognome"
-          }
-        ]}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it("ClaimsSelector Snapshot (custom component)", () => {
-    const { toJSON } = render(
-      <ClaimsSelector
-        title="Patente di guida"
-        selectionEnabled={false}
-        items={[
-          {
-            id: "name",
-            value: "data:image/png;base64,iVBORw0KGgoAAAANSUh",
-            description: "Nome e cognome",
-            type: "image"
-          }
-        ]}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});