@pagopa/io-app-design-system 1.18.0 → 1.19.0

package/src/components/listitems/__test__/listitem.test.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { Alert } from "react-native";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
+import ListItemIDP from "../../modules/ModuleIDP";
+import ListItemAction from "../ListItemAction";
 import ListItemInfo from "../ListItemInfo";
 import ListItemInfoCopy from "../ListItemInfoCopy";
 import ListItemNav from "../ListItemNav";
 import ListItemNavAlert from "../ListItemNavAlert";
-import ListItemAction from "../ListItemAction";
-import ListItemIDP from "../../modules/ModuleIDP";
+import { ListItemRadioWithAmount } from "../ListItemRadioWithAmount";
 import { ListItemTransaction } from "../ListItemTransaction";
 import { PressableListItemBase } from "../PressableListItemsBase";
-import { ListItemRadioWithAmount } from "../ListItemRadioWithAmount";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -114,3 +115,103 @@ describe("Test List Item Components", () => {
     expect(notSuggested).toMatchSnapshot();
   });
 });
+
+describe("Test List Item Components - Experimental Enabled ", () => {
+  it("ListItemInfo Snapshot", () => {
+    const listItemInfo = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemInfo
+        label={"label"}
+        value={"testValue"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfo>
+    ).toJSON();
+    expect(listItemInfo).toMatchSnapshot();
+  });
+  it("ListItemInfoCopy Snapshot", () => {
+    const listItemInfoCopy = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemInfoCopy
+        label={"label"}
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfoCopy>
+    ).toJSON();
+    expect(listItemInfoCopy).toMatchSnapshot();
+  });
+  it("ListItemNav Snapshot", () => {
+    const listItemNav = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemNav
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNav>
+    ).toJSON();
+    expect(listItemNav).toMatchSnapshot();
+  });
+  it("ListItemNavAlert Snapshot", () => {
+    const listItemNavAlert = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemNavAlert
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNavAlert>
+    ).toJSON();
+    expect(listItemNavAlert).toMatchSnapshot();
+  });
+  it("ListItemAction Snapshot", () => {
+    const listItemAction = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemAction
+        label={"label"}
+        variant={"primary"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemAction>
+    ).toJSON();
+    expect(listItemAction).toMatchSnapshot();
+  });
+  it("ListItemIDP Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemIDP></ListItemIDP>
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("ListItemTransaction Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemTransaction
+        title="TITLE"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        isLoading={true}
+        onPress={onButtonPress}
+      />
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("PressableListItemsBase Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <PressableListItemBase></PressableListItemBase>
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("ListItemRadioWithAmount Snapshot", () => {
+    const suggested = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemRadioWithAmount
+        formattedAmountString="€ 1.000,00"
+        label="label"
+        suggestReason="suggestReason"
+        isSuggested={true}
+        selected={true}
+      />
+    ).toJSON();
+    const notSuggested = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemRadioWithAmount
+        formattedAmountString="€ 1.000,00"
+        label="label"
+        isSuggested={false}
+      />
+    ).toJSON();
+    expect(suggested).toMatchSnapshot();
+    expect(notSuggested).toMatchSnapshot();
+  });
+});

package/src/components/radio/RadioGroup.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentProps } from "react";
-import { View } from "react-native";
 import { Divider } from "../divider";
-import { ListItemRadio } from "../listitems/ListItemRadio";
+import { ListItemRadio, ListItemRadioWithAmount } from "../listitems";
 
 export type RadioItem<T> = {
   id: T;
@@ -12,20 +11,45 @@ export type RadioItem<T> = {
   loadingProps?: ComponentProps<typeof ListItemRadio>["loadingProps"];
 };
 
-type Props<T> = {
-  items: ReadonlyArray<RadioItem<T>>;
+export type RadioItemWithAmount<T> = {
+  id: T;
+  label: string;
+  formattedAmountString: string;
+} & (
+  | {
+      isSuggested?: false;
+    }
+  | {
+      isSuggested: true;
+      suggestReason: string;
+    }
+);
+type CommonProps<T> = {
   selectedItem?: T;
   onPress: (selected: T) => void;
 };
 
+type RadioListItemProps<T> = {
+  type: "radioListItem";
+  items: ReadonlyArray<RadioItem<T>>;
+} & CommonProps<T>;
+
+type RadioListItemWithAmountProps<T> = {
+  type: "radioListItemWithAmount";
+  items: ReadonlyArray<RadioItemWithAmount<T>>;
+} & CommonProps<T>;
+
+type Props<T> = RadioListItemProps<T> | RadioListItemWithAmountProps<T>;
+
 /**
  * A list of radio buttons.
  * The management of the selection is demanded and derived by the `selectedItem` prop.
  * The item with the `id` equal to the `selectedItem` is the active one.
  */
-export const RadioGroup = <T,>({ items, selectedItem, onPress }: Props<T>) => (
-  <View>
-    {items.map((item, index) => (
+
+const RadioListItem = <T,>(props: RadioListItemProps<T>) => (
+  <>
+    {props.items.map((item, index) => (
       <React.Fragment key={`radio_item_${item.id}`}>
         <ListItemRadio
           testID={`RadioItemTestID_${item.id}`}
@@ -34,11 +58,37 @@ export const RadioGroup = <T,>({ items, selectedItem, onPress }: Props<T>) => (
           startImage={item.startImage}
           disabled={item.disabled}
           loadingProps={item.loadingProps}
-          onValueChange={() => onPress(item.id)}
-          selected={selectedItem === item.id}
+          onValueChange={() => props.onPress(item.id)}
+          selected={props.selectedItem === item.id}
         />
-        {index < items.length - 1 && <Divider />}
+        {index < props.items.length - 1 && <Divider />}
       </React.Fragment>
     ))}
-  </View>
+  </>
+);
+
+const RadioListItemWithAmount = <T,>(
+  props: RadioListItemWithAmountProps<T>
+) => (
+  <>
+    {props.items.map((item, index) => (
+      <React.Fragment key={`radio_item_${item.id}`}>
+        <ListItemRadioWithAmount
+          label={item.label}
+          formattedAmountString={item.formattedAmountString}
+          suggestReason={item.isSuggested ? item.suggestReason : ""}
+          isSuggested={item.isSuggested}
+          onValueChange={() => props.onPress(item.id)}
+          selected={props.selectedItem === item.id}
+        />
+        {index < props.items.length - 1 && <Divider />}
+      </React.Fragment>
+    ))}
+  </>
+);
+export const RadioGroup = <T,>(props: Props<T>) => (
+  <>
+    {props.type === "radioListItem" && RadioListItem(props)}
+    {props.type === "radioListItemWithAmount" && RadioListItemWithAmount(props)}
+  </>
 );

package/src/components/tabs/TabItem.tsx

@@ -31,6 +31,7 @@ export type TabItem = WithTestID<{
   accessibilityHint?: string;
   // Events
   onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
 }>;
 
 type ColorStates = {
@@ -42,6 +43,7 @@ type ColorStates = {
   foreground: {
     default: IOColors;
     selected: IOColors;
+    disabled: IOColors;
   };
 };
 
@@ -53,8 +55,9 @@ const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
       pressed: IOColors["grey-50"]
     },
     foreground: {
-      default: "grey-650",
-      selected: "black"
+      default: "black",
+      selected: "black",
+      disabled: "grey-700"
     }
   },
   dark: {
@@ -65,7 +68,8 @@ const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
     },
     foreground: {
       default: "white",
-      selected: "grey-850"
+      selected: "black",
+      disabled: "white"
     }
   }
 };
@@ -79,6 +83,7 @@ const TabItem = ({
   accessibilityHint,
   testID,
   onPress,
+  disabled = false,
   icon,
   iconSelected
 }: TabItem) => {
@@ -89,7 +94,11 @@ const TabItem = ({
   } = useSpringPressProgressValue(IOSpringValues.selection);
 
   const colors = mapColorStates[color];
-  const foregroundColor = colors.foreground[selected ? "selected" : "default"];
+
+  const foregroundColor =
+    colors.foreground[
+      selected ? "selected" : disabled ? "disabled" : "default"
+    ];
 
   const opaquePressedBackgroundColor = hexToRgba(
     colors.background.pressed,
@@ -149,9 +158,15 @@ const TabItem = ({
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       accessible={true}
+      disabled={disabled}
     >
       <Animated.View
-        style={[styles.container, animatedStyle, fullWidth && styles.fullWidth]}
+        style={[
+          styles.container,
+          animatedStyle,
+          fullWidth && styles.fullWidth,
+          disabled && styles.disabled
+        ]}
       >
         {activeIcon && (
           <>
@@ -177,7 +192,8 @@ const styles = StyleSheet.create({
   },
   fullWidth: {
     alignSelf: "auto"
-  }
+  },
+  disabled: { opacity: 0.5 }
 });
 
 export { TabItem };

package/src/components/typography/LabelHeader.tsx

@@ -9,7 +9,7 @@ type AllowedColors =
   | "grey-850"
   | "white"
   | "black";
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
 type LabelHeaderProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -24,21 +24,26 @@ const labelHeaderDefaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyLabelHeaderFontName: IOFontFamily = "TitilliumWeb";
-
+const legacyLabelHeaderWeight: AllowedWeight = "SemiBold";
+const legacyLabelHeaderLineHeight = 20;
 /**
  * `LabelHeader` typographic style
  */
 export const LabelHeader = (props: LabelHeaderProps) => {
   const { isExperimental } = useIOExperimentalDesign();
-
+  // console.log("isExperimental", isExperimental);
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: labelHeaderDefaultWeight,
+    defaultWeight: isExperimental
+      ? labelHeaderDefaultWeight
+      : legacyLabelHeaderWeight,
     defaultColor: labelHeaderDefaultColor,
-    font: isExperimental ? legacyLabelHeaderFontName : labelHeaderFontName,
+    font: isExperimental ? labelHeaderFontName : legacyLabelHeaderFontName,
     fontStyle: {
       fontSize: labelHeaderFontSize,
-      lineHeight: labelHeaderLineHeight
+      lineHeight: isExperimental
+        ? labelHeaderLineHeight
+        : legacyLabelHeaderLineHeight
     }
   });
 };

package/src/core/IODSExperimentalContextProvider.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { constVoid } from "fp-ts/lib/function";
+import { constVoid } from "fp-ts/function";
+import React from "react";
 
 type IOExperimentalContextType = {
   isExperimental: boolean;
@@ -8,7 +8,7 @@ type IOExperimentalContextType = {
 /**
  * Experimental Context for new UI Representations
  */
-const IOExperimentalDesignContext =
+export const IOExperimentalDesignContext =
   React.createContext<IOExperimentalContextType>({
     isExperimental: false,
     setExperimental: constVoid

package/src/utils/testing.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { IODSExperimentalContextProvider } from "../core/IODSExperimentalContextProvider";
+
+export const TestRendererWithExperimentalEnabledContextProvider = (
+  ui: React.ReactElement,
+  options?: TestRenderer.TestRendererOptions
+) =>
+  TestRenderer.create(
+    <IODSExperimentalContextProvider isExperimentaEnabled={true}>
+      {ui}
+    </IODSExperimentalContextProvider>,
+    options
+  );