@pagopa/io-app-design-system 5.9.0 → 5.10.0

package/src/components/modules/ModuleNavigationAlt.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageURISource,
+  StyleSheet,
+  View
+} from "react-native";
+import { SvgProps } from "react-native-svg";
+import { useIOTheme } from "../../context";
+import {
+  IOColors,
+  IOListItemVisualParams,
+  IOSpacer,
+  IOVisualCostants
+} from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { HStack, VStack } from "../layout";
+import { LoadingSpinner } from "../loadingSpinner";
+import { IOSkeleton } from "../skeleton";
+import { BodySmall, LabelMini } from "../typography";
+import { ModuleStatic } from "./ModuleStatic";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
+type LoadingProps = {
+  isLoading: true;
+  loadingAccessibilityLabel?: string;
+};
+
+type ImageProps =
+  | { icon: IOIcons; image?: never }
+  | {
+      icon?: never;
+      image:
+        | ImageURISource
+        | ImageSourcePropType
+        | React.ReactElement<SvgProps>;
+    };
+
+type BaseProps = {
+  isLoading?: false;
+  title: string;
+  subtitle?: string;
+  badge?: Badge;
+  isFetching?: boolean;
+  rightIcon?: IOIcons;
+  iconColor?: IOColors;
+} & ImageProps &
+  PressableModuleBaseProps;
+
+type ModuleNavigationAltProps = LoadingProps | BaseProps;
+
+export const ModuleNavigationAlt = (
+  props: WithTestID<ModuleNavigationAltProps>
+) => {
+  const theme = useIOTheme();
+  const { hugeFontEnabled } = useIOFontDynamicScale();
+
+  const graphicWrapperSize: IOIconSizeScale = 48;
+
+  if (props.isLoading) {
+    return (
+      <ModuleNavigationAltSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
+  }
+
+  const {
+    testID,
+    icon,
+    iconColor = theme["interactiveElem-default"],
+    image,
+    title,
+    subtitle,
+    onPress,
+    badge,
+    isFetching,
+    rightIcon,
+    ...pressableProps
+  } = props;
+
+  const iconComponent = icon && (
+    <Icon name={icon} size={32} color={iconColor} />
+  );
+
+  const imageComponent = () => {
+    if (!image) {
+      return null;
+    }
+
+    if (React.isValidElement(image)) {
+      return image;
+    } else {
+      return (
+        <View>
+          <Image
+            source={image as ImageSourcePropType}
+            style={styles.image}
+            accessibilityIgnoresInvertColors={true}
+          />
+        </View>
+      );
+    }
+  };
+
+  const endComponent = () => {
+    if (isFetching) {
+      return (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+        />
+      );
+    }
+    if (onPress) {
+      return (
+        <Icon
+          name={rightIcon ?? "chevronRightListItem"}
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <PressableModuleBase {...pressableProps} onPress={onPress}>
+      <HStack space={8} style={{ alignItems: "center" }}>
+        <HStack
+          space={IOVisualCostants.iconMargin as IOSpacer}
+          style={{ alignItems: "center", flexGrow: 1, flexShrink: 1 }}
+        >
+          {!hugeFontEnabled && (
+            <View
+              style={{
+                alignItems: "center",
+                justifyContent: "center",
+                width: graphicWrapperSize,
+                height: graphicWrapperSize
+              }}
+            >
+              {iconComponent ?? imageComponent()}
+            </View>
+          )}
+
+          <VStack space={8} style={{ flexShrink: 1, alignItems: "flex-start" }}>
+            {badge ? <Badge {...badge} /> : null}
+            <View>
+              <BodySmall
+                color={theme["interactiveElem-default"]}
+                weight="Semibold"
+                numberOfLines={2}
+                lineBreakMode="middle"
+                style={{ flexShrink: 1 }}
+              >
+                {title}
+              </BodySmall>
+              {subtitle && (
+                <LabelMini weight="Regular" color={theme["textBody-tertiary"]}>
+                  {subtitle}
+                </LabelMini>
+              )}
+            </View>
+          </VStack>
+        </HStack>
+        {endComponent()}
+      </HStack>
+    </PressableModuleBase>
+  );
+};
+
+const ModuleNavigationAltSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingProps, "loadingAccessibilityLabel">) => (
+  <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
+    startBlock={
+      <HStack
+        style={{ alignItems: "center" }}
+        space={IOVisualCostants.iconMargin as IOSpacer}
+      >
+        <IOSkeleton shape="square" size={32} radius={8} />
+        <VStack space={4}>
+          <IOSkeleton shape="rectangle" width={52} height={12} radius={8} />
+          <IOSkeleton shape="rectangle" width={96} height={16} radius={8} />
+          <IOSkeleton shape="rectangle" width={160} height={12} radius={8} />
+        </VStack>
+      </HStack>
+    }
+    endBlock={
+      <IOSkeleton shape="rectangle" width={64} height={24} radius={16} />
+    }
+  />
+);
+
+const styles = StyleSheet.create({
+  image: {
+    width: "100%",
+    height: "auto",
+    resizeMode: "contain"
+  }
+});

package/src/components/modules/__test__/ModuleNavigationAlt.test.tsx

@@ -0,0 +1,116 @@
+// __tests__/ModuleNavigationAlt.test.tsx
+import React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { Alert } from "react-native";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
+import { ModuleNavigationAlt } from "../ModuleNavigationAlt";
+
+const onPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+describe("ModuleNavigationAlt - Snapshot", () => {
+  it("Loading state", () => {
+    const tree = TestRenderer.create(
+      <ModuleNavigationAlt
+        isLoading
+        loadingAccessibilityLabel="loading items"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Title only + chevron (onPress)", () => {
+    const tree = TestRenderer.create(
+      <ModuleNavigationAlt title="My Title" onPress={onPress} icon="spid" />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Title + Subtitle", () => {
+    const tree = TestRenderer.create(
+      <ModuleNavigationAlt
+        title="My Title"
+        subtitle="A nice subtitle"
+        icon="spid"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("With Badge (badge + chevron)", () => {
+    const tree = TestRenderer.create(
+      <ModuleNavigationAlt
+        title="With Badge"
+        onPress={onPress}
+        badge={{ text: "TEST", variant: "highlight" }}
+        icon="spid"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("With Image (no icon) + chevron (onPress)", () => {
+    const tree = TestRenderer.create(
+      <ModuleNavigationAlt
+        title="With Image"
+        image={{ uri: "https://example.com/icon.png" }}
+        onPress={onPress}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe("ModuleNavigationAlt - Snapshot (Experimental Enabled)", () => {
+  it("Loading state", () => {
+    const tree = TestRendererWithExperimentalEnabledContextProvider(
+      <ModuleNavigationAlt
+        isLoading
+        loadingAccessibilityLabel="loading items"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Title only + chevron (onPress)", () => {
+    const tree = TestRendererWithExperimentalEnabledContextProvider(
+      <ModuleNavigationAlt title="My Title" onPress={onPress} icon="spid" />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("Title + Subtitle", () => {
+    const tree = TestRendererWithExperimentalEnabledContextProvider(
+      <ModuleNavigationAlt
+        title="My Title"
+        subtitle="A nice subtitle"
+        icon="spid"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("With Badge (badge + chevron)", () => {
+    const tree = TestRendererWithExperimentalEnabledContextProvider(
+      <ModuleNavigationAlt
+        title="With Badge"
+        onPress={onPress}
+        badge={{ text: "TEST", variant: "highlight" }}
+        icon="spid"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("With Image (no icon) + chevron (onPress) - Experimental", () => {
+    const tree = TestRendererWithExperimentalEnabledContextProvider(
+      <ModuleNavigationAlt
+        title="With Image"
+        image={{ uri: "https://example.com/icon.png" }}
+        onPress={onPress}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Loading state 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title + Subtitle 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title only + chevron (onPress) 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge + chevron) 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Image (no icon) + chevron (onPress) - Experimental 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot Loading state 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot Title + Subtitle 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot Title only + chevron (onPress) 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `null`;
+
+exports[`ModuleNavigationAlt - Snapshot With Image (no icon) + chevron (onPress) 1`] = `null`;

package/src/components/modules/index.tsx

@@ -3,6 +3,7 @@ export * from "./ModuleCheckout";
 export * from "./ModuleCredential";
 export * from "./ModuleIDP";
 export * from "./ModuleNavigation";
+export * from "./ModuleNavigationAlt";
 export * from "./ModulePaymentNotice";
 export * from "./ModuleSummary";
 export * from "./PressableModuleBase";

package/src/components/modules/spid-text-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143 69.9"><style>.st0{fill:#06C}</style><path id="XMLID_85_" class="st0" d="M29.8 25c-6.3-.8-10.8-1.2-13.3-1.2s-4.2.2-4.9.7c-.7.5-1.1 1.2-1.1 2.2 0 1 .5 1.7 1.5 2.1 1 .4 3.6.9 7.7 1.7 4.1.7 7.1 2 8.8 3.6 1.7 1.7 2.6 4.4 2.6 8.2 0 8.3-5.1 12.4-15.4 12.4-3.4 0-7.5-.5-12.3-1.4l-2.5-.5.3-8.6c6.3.8 10.8 1.2 13.2 1.2 2.5 0 4.2-.2 5.1-.7.9-.5 1.3-1.2 1.3-2.2 0-1-.5-1.7-1.4-2.1-.9-.5-3.4-1-7.4-1.7s-6.9-1.8-8.9-3.4C1.2 33.7.2 30.9.2 26.8s1.4-7.1 4.1-9.2c2.8-2.1 6.3-3.1 10.7-3.1 3 0 7.1.5 12.4 1.5l2.5.5-.1 8.5z"/><path id="XMLID_82_" class="st0" d="M55.4 23.7c-1.9 0-3.8.4-5.8 1.2l-.9.4v20.1c2.3.3 4.2.5 5.6.5 3 0 5-.9 6.1-2.6 1.1-1.7 1.7-4.7 1.7-8.9 0-7.2-2.2-10.7-6.7-10.7M38.5 69.9V15.4h10.2v2.1c3.3-2 6.2-3 8.8-3 5.2 0 9 1.6 11.4 4.6 2.5 3.1 3.7 8.4 3.7 15.8s-1.4 12.6-4.1 15.5c-2.7 2.9-7.2 4.3-13.4 4.3-1.7 0-3.5-.2-5.5-.5l-.9-.2v15.8H38.5z"/><path id="XMLID_79_" class="st0" d="M131.6 44.5l1.1-.2V24.1c-2.8-.5-5.3-.8-7.5-.8-4.1 0-6.2 3.7-6.2 11.1 0 4 .5 6.8 1.4 8.5.9 1.7 2.4 2.5 4.6 2.5s4.3-.2 6.6-.9M143 0v53.8h-10.2v-1.6c-3.6 1.7-6.7 2.5-9.3 2.5-5.6 0-9.5-1.6-11.7-4.8-2.2-3.2-3.3-8.3-3.3-15.3s1.3-12.1 4-15.3c2.6-3.2 6.6-4.8 11.9-4.8 1.6 0 3.9.3 6.8.8l1.5.3V0H143z"/><path id="XMLID_78_" class="st0" d="M90.5 37.7c-3.2 0-5.8-1.1-7.8-3.2s-3.1-4.8-3.1-8 1-5.8 3.1-7.9c2-2.1 4.6-3.1 7.8-3.1s5.8 1.1 7.7 3.2c2 2.2 3 4.8 3 8s-1 5.8-3 7.9c-2 2-4.5 3.1-7.7 3.1"/><path id="XMLID_77_" class="st0" d="M79.6 53.2c0-3.2 1-5.8 3.1-7.9 2-2.1 4.6-3.1 7.8-3.1s5.8 1.1 7.7 3.2c2 2.2 3 4.8 3 8"/></svg>

package/src/core/IOColors.ts

@@ -80,7 +80,9 @@ export const IOColors = asIOColors({
   "info-100": "#E1F5FE",
   "blueItalia-850": "#001F3D",
   "blueItalia-600": "#0052A3",
-  "blueItalia-500": "#0066CC" /* pagoPA service */,
+  "blueItalia-500":
+    "#0066CC" /* Italian services, such as pagoPA, CieID, SpID, etc… */,
+  "blueItalia-300": "#4595E5",
   "blueItalia-100": "#C4DCF5",
   "blueItalia-50": "#DDEBFA"
 });
@@ -190,6 +192,7 @@ export const IOColorsExtra = {
   "blueItalia-850": IOColors["blueItalia-850"],
   "blueItalia-600": IOColors["blueItalia-600"],
   "blueItalia-500": IOColors["blueItalia-500"],
+  "blueItalia-300": IOColors["blueItalia-300"],
   "blueItalia-100": IOColors["blueItalia-100"],
   "blueItalia-50": IOColors["blueItalia-50"]
 };
@@ -217,6 +220,7 @@ const themeKeys = [
   "buttonText-danger",
   "buttonText-disabled",
   "listItem-pressed",
+  "italyBrand-default",
   // Typography
   "textHeading-default",
   "textHeading-secondary",
@@ -291,6 +295,7 @@ export const IOThemeLight: IOTheme = {
   "buttonText-danger": "white",
   "buttonText-disabled": "grey-700",
   "listItem-pressed": "grey-50",
+  "italyBrand-default": "blueItalia-500",
   // Typography
   "textHeading-default": "black",
   "textHeading-secondary": "grey-850",
@@ -360,6 +365,7 @@ export const IOThemeDark: IOTheme = {
   "buttonText-danger": "white",
   "buttonText-disabled": "grey-300",
   "listItem-pressed": "grey-900",
+  "italyBrand-default": "blueItalia-300",
   // Typography
   "textHeading-default": "white",
   "textHeading-secondary": "grey-300",