@pagopa/io-app-design-system 1.16.0 → 1.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -36,7 +36,10 @@
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "generate:icons": "node scripts/generateNewIcons.js",
+    "generate:pictograms": "node scripts/generateNewPictograms.js",
+    "generate": "npm-run-all generate:*"
   },
   "keywords": [
     "react-native",
@@ -98,6 +101,7 @@
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
     "storybook": "^7.4.0",
+    "storybook-react-context": "^0.6.0",
     "svgo": "^3.0.2",
     "typescript": "^4.9.5"
   },
@@ -163,6 +167,9 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": [
+      "example"
+    ],
     "targets": [
       "commonjs",
       "module",

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -78,15 +78,15 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 16,
-            "lineHeight": 24,
+            "fontSize": 18,
+            "lineHeight": 25,
           }
         }
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 24,
+              "fontSize": 18,
+              "lineHeight": 25,
             },
             {
               "color": "#031344",

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -74,15 +74,15 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 16,
-            "lineHeight": 24,
+            "fontSize": 18,
+            "lineHeight": 25,
           }
         }
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 24,
+              "fontSize": 18,
+              "lineHeight": 25,
             },
             {
               "color": "#0E0F13",

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -126,10 +126,12 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         ]}
       />
       {isChecked && (
-        <AnimatedTick
-          progress={tickAnimationProgress}
-          stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
-        />
+        <View style={{ zIndex: 1 }}>
+          <AnimatedTick
+            progress={tickAnimationProgress}
+            stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+          />
+        </View>
       )}
     </Pressable>
   );

package/src/components/codeInput/CodeInput.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+import { IOColors, IOStyles } from "../../core";
+import { triggerHaptic } from "../../functions";
+
+type CodeInputProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  length: number;
+  onValidate: (value: string) => boolean;
+  variant?: "light" | "dark";
+};
+
+const DOT_SIZE = 16;
+
+const styles = StyleSheet.create({
+  dotShape: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: 8,
+    borderWidth: 2
+  },
+  dotEmpty: {
+    borderColor: IOColors["grey-200"]
+  },
+  wrapper: { justifyContent: "center", gap: DOT_SIZE }
+});
+
+const EmptyDot = () => <View style={[styles.dotShape, styles.dotEmpty]} />;
+
+const FilletDot = ({ color }: { color: IOColors }) => (
+  <View
+    style={[
+      styles.dotShape,
+      { backgroundColor: IOColors[color], borderColor: IOColors[color] }
+    ]}
+  />
+);
+
+export const CodeInput = ({
+  length,
+  value,
+  onValueChange,
+  variant = "light",
+  onValidate
+}: CodeInputProps) => {
+  const [status, setStatus] = React.useState<"default" | "error">("default");
+
+  const translate = useSharedValue(0);
+  const shakeOffset: number = 8;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translate.value }]
+  }));
+
+  const fillColor = useMemo(
+    () =>
+      status === "error"
+        ? "error-600"
+        : variant === "light"
+        ? "white"
+        : "black",
+    [variant, status]
+  );
+
+  useEffect(() => {
+    if (onValidate && value.length === length) {
+      const isValid = onValidate(value);
+
+      if (!isValid) {
+        setStatus("error");
+        triggerHaptic("notificationError");
+
+        // eslint-disable-next-line functional/immutable-data
+        translate.value = withSequence(
+          withTiming(shakeOffset, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(-shakeOffset, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(shakeOffset / 2, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(-shakeOffset / 2, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(0, { duration: 75, easing: Easing.inOut(Easing.cubic) })
+        );
+
+        const timer = setTimeout(() => {
+          setStatus("default");
+          onValueChange("");
+        }, 500);
+        return () => clearTimeout(timer);
+      }
+    }
+    return;
+  }, [value, onValidate, length, onValueChange, translate]);
+
+  return (
+    <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>
+      {[...Array(length)].map((_, i) => (
+        <React.Fragment key={i}>
+          {value[i] ? <FilletDot color={fillColor} /> : <EmptyDot />}
+        </React.Fragment>
+      ))}
+    </Animated.View>
+  );
+};

package/src/components/codeInput/index.tsx

@@ -0,0 +1 @@
+export * from "./CodeInput";

package/src/components/icons/Icon.tsx

@@ -190,6 +190,7 @@ import IconRead from "./svg/IconRead";
 import IconReceiptOff from "./svg/IconReceiptOff";
 import IconSignal from "./svg/IconSignal";
 import IconTouch from "./svg/IconTouch";
+import IconSparkles from "./svg/IconSparkles";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -289,6 +290,7 @@ export const IOIcons = {
   familySharing: IconFamilySharing,
   lightbulb: IconLightbulb,
   magicWand: IconMagicWand,
+  sparkles: IconSparkles,
   starFilled: IconStarFilled,
   starEmpty: IconStarEmpty,
   hearthEmpty: IconHearthEmpty,

package/src/components/icons/README.md

@@ -4,33 +4,91 @@ There are different sets:
 * **Navigation**: Icons used in the main Tab bar
 * **Biometric**: Icons used for the biometric identification
 * **Categories**: Icons used for the different sectors available in the Carta Giovani Nazionale
-* **Product**: PagoPA products' icons 
-
-## Prefixes
-- **General**: `Icon…`
-- **Navigation**: `IconNav…`
-- **Biometric**: `IconBiometric…`
-- **Categories**: `IconCateg…`
-- **Product**: `IconProduct…`
+* **Product**: PagoPA products' icons
+* **System**: OS-specific icons (iOS/Android)
 
 ## Add a new icon
-First of all, follow the instructions stated in the main README (`Vector graphics` section).
 
-If you want to add a new icon in the `General` set, open the `Icon.tsx` file and import the React component:
-```jsx
-[…]
-import IconSpid from "./svg/IconSpid";
-[…]
-```
+### Prerequisites
+
+In your user interface design app (Figma/Sketch) export your SVG with `1×` preset. The name usually consists of a specific prefix followed by the associated key:
+  - **General**: `Icon…`
+  - **Navigation**: `IconNav…`
+  - **Biometric**: `IconBiometric…`
+  - **Categories**: `IconCateg…`
+  - **Product**: `IconProduct…`
+  - **System**: `IconSystem…`
+
+> [!important]
+> The icon must be contained within a `24×24` frame.
+
+> [!tip]
+> If you want to add a new `Wallet` icon to be used in the main tab bar, your icon will have a `IconNavWallet` filename. If it doesn't belong to a specific set, you just put the name after the prefix `Icon…`, so `IconWallet`
+
+> [!caution]
+> This filename will be the same as the React component, so make sure you don't already have a component with that filename
+
+### Create the corresponding React component
+
+#### Using `scripts/generateNewIcons.js`
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your terminal, in the same folder, run the command: `yarn generate:icons`
+3. The script will process `scripts/icons_timestamp.txt`, generate the new React components (with `*.tsx` extension) following exactly the steps listed in the manual process (see below), and process **only the files added after this timestamp value**
+4. If the `generateNewIcons` script accidentally overwrites older React components, remember to discard the changes before committing
+
+> [!caution] 
+> If your icon **is not** monochromatic, you should use the manual process because the script doesn't support this specific case yet
+
+#### Manual process (alternative)
+
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your original SVG file, delete `width` and `height` attributes and leave the original `viewBox` attribute. You could easily process the image using online editors like [SVGOmg](https://jakearchibald.github.io/svgomg/) (enable `Prefer viewBox to width/height`)
+3. In the `icons/svg` folder, create a new React component (with a `.tsx` extension) of the same name
+4. Copy all the `<path>` elements into the new React component and replace the original `<path>` with the element `<Path>` (capital P) from the `react-native-svg` package. Replace all the harcoded fill values with the generic `currentColor` value, so that the icon inherits the color from the parent `Svg` container
+
+5. Add the dynamic size and colour (if required), replacing the hardcoded values with the corresponding props. The final result should be similar to the following:
+    ```tsx
+    import { Svg, Path } from "react-native-svg";
+    // [...]
+
+    const IconSpid = ({ size, style }: SVGIconProps) => (
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+        <Path
+          d="M13.615 …"
+          fill="currentColor"
+        />
+      </Svg>
+    );
+    ```
+6. Repeat the previous steps for each icon
+7. Once you have finished processing all the new icons, run `node generateNewTimestamp` to avoid overwriting these files with the `generateNewIcons` process.
+
+> [!caution] 
+> The `currentColor` value should only be added for monochromatic icons. For example, if you export an `IconSystem...` with specific color values, don't add it at all.
+
+#### Wrong icon rendering?
+Before exporting the SVG file:
+1. Detach the symbol instance to avoid destructive actions to the original source component. Use a draft or disposable project document. **Don't detach it** if you are in the original Design System project file
+2. Outline all the present strokes (unless required for dynamic stroke width, but we don't manage this case at the moment)
+3. Select all the different paths and flatten into one. Now you should have a single vector layer.
+4. Make sure your vector path is centered (both vertically and horizontally) in a square
+
+### Add the corresponding key to the `Icon` component
+
 Add the desired key to the `IOIcons` object with the corresponding component reference:
-```jsx
+```tsx
 export const IOIcons = {
   spid: IconSpid,
   …
 }
 ```
-Add the key to the relative icon set:
-```ts
+There's no need to add the new icon in the specific Design System page because it happens automatically.
+
+> [!important]
+> To keep the icons grouped by sets, remember to put the key above the icons with a specific prefix
+
+If the icon belongs to a specific set, add the key to the relative icon set as well:
+```tsx
 export const IONavIcons = {
   navMessages,
   navWallet,
@@ -42,6 +100,8 @@ export const IONavIcons = {
 } as const;
 ```
 
+### Use the new icon in a different component
+
 You can add the recently added icon with the following declaration:
 ```jsx
 // Default size: 24×24px
@@ -51,5 +111,5 @@ You can add the recently added icon with the following declaration:
 
 ## View all the available icons
 There are two ways:
-- In the app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
+- In the main app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
 - In the repository, go to the `svg/originals` subfolder

package/src/components/icons/svg/IconSparkles.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSparkles = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 17" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"
+    />
+  </Svg>
+);
+
+export default IconSparkles;

package/src/components/icons/svg/originals/IconSparkles.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17">
+  <path fill="#5517E3" d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"/>
+</svg>

package/src/components/index.tsx

@@ -2,25 +2,27 @@ export * from "./accordion";
 export * from "./alert";
 export * from "./avatar";
 export * from "./badge";
+export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
 export * from "./contentWrapper";
+export * from "./codeInput";
 export * from "./divider";
 export * from "./featureInfo";
 export * from "./icons";
+export * from "./layout";
 export * from "./listitems";
 export * from "./logos";
 export * from "./loadingSpinner";
 export * from "./modules";
-export * from "./banner";
+export * from "./numberpad";
 export * from "./pictograms";
 export * from "./radio";
 export * from "./spacer";
+export * from "./stepper";
 export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
 export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
-export * from "./layout";
-export * from "./numberpad";

package/src/components/layout/HeaderSecondLevel.tsx

@@ -74,7 +74,6 @@ const styles = StyleSheet.create({
   headerInner: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
     height: IOVisualCostants.headerHeight,
-    borderBottomWidth: 1,
     flexGrow: 1,
     flexDirection: "row",
     alignItems: "center",
@@ -146,19 +145,17 @@ export const HeaderSecondLevel = ({
   return (
     <Animated.View
       accessibilityRole="header"
-      style={
+      style={[
         transparent
           ? { borderBottomWidth: 0 }
-          : { backgroundColor: IOColors[HEADER_BG_COLOR] }
-      }
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
+        { borderBottomWidth: 1 },
+        headerWrapperAnimatedStyle
+      ]}
     >
       <Animated.View
         testID={testID}
-        style={[
-          { marginTop: insets.top },
-          styles.headerInner,
-          headerWrapperAnimatedStyle
-        ]}
+        style={[{ marginTop: insets.top }, styles.headerInner]}
       >
         <IconButton
           icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}

package/src/components/listitems/ListItemAction.tsx

@@ -29,6 +29,7 @@ import {
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, Icon } from "../icons";
+import { buttonTextFontSize } from "../typography/ButtonText";
 
 export type ListItemAction = WithTestID<{
   label: string;
@@ -41,7 +42,7 @@ export type ListItemAction = WithTestID<{
 
 const styles = StyleSheet.create({
   label: {
-    fontSize: 16,
+    fontSize: buttonTextFontSize,
     lineHeight: 20,
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   }
@@ -50,8 +51,8 @@ const styles = StyleSheet.create({
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
   labelLegacy: {
-    fontSize: 18,
-    lineHeight: 24,
+    fontSize: buttonTextFontSize,
+    lineHeight: 20,
     ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });

package/src/components/listitems/ListItemHeader.tsx

@@ -0,0 +1,146 @@
+import React, { ComponentProps, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import {
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOStyles,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { H6 } from "../typography";
+import { ButtonLink, IconButton } from "../buttons";
+import { Badge } from "../badge";
+
+type ButtonLinkActionProps = {
+  type: "buttonLink";
+  componentProps: ComponentProps<typeof ButtonLink>;
+};
+
+type IconButtonActionProps = {
+  type: "iconButton";
+  componentProps: ComponentProps<typeof IconButton>;
+};
+
+type BadgeProps = {
+  type: "badge";
+  componentProps: ComponentProps<typeof Badge>;
+};
+
+type IconProps =
+  | {
+      iconName: IOIcons;
+      iconColor?: ComponentProps<typeof Icon>["color"];
+    }
+  | { iconName?: never; iconColor?: never };
+
+type EndElementProps =
+  | ButtonLinkActionProps
+  | IconButtonActionProps
+  | BadgeProps;
+
+export type ListItemHeader = WithTestID<{
+  label: string;
+  numberOfLines?: number;
+  endElement?: EndElementProps;
+  // Accessibility
+  accessibilityLabel?: string;
+}> &
+  IconProps;
+
+export const ListItemHeader = ({
+  label,
+  iconName,
+  iconColor,
+  endElement,
+  accessibilityLabel,
+  testID
+}: ListItemHeader) => {
+  const theme = useIOTheme();
+
+  const listItemAccessibilityLabel = useMemo(
+    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
+    [label, accessibilityLabel]
+  );
+
+  const itemInfoTextComponent = useMemo(
+    () => (
+      <View
+        accessible={endElement === undefined ? true : false}
+        importantForAccessibility={
+          endElement === undefined || endElement.type === "badge"
+            ? "yes"
+            : "no-hide-descendants"
+        }
+        accessibilityElementsHidden={
+          endElement !== undefined && endElement.type !== "badge"
+        }
+      >
+        <H6 weight="Regular" color={theme["textBody-tertiary"]}>
+          {label}
+        </H6>
+      </View>
+    ),
+    [label, theme, endElement]
+  );
+
+  const listItemInfoAction = useCallback(() => {
+    if (endElement) {
+      const { type, componentProps } = endElement;
+
+      switch (type) {
+        case "buttonLink":
+          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+
+          return (
+            <ButtonLink
+              {...componentProps}
+              accessibilityLabel={buttonLinkAccessibilityLabel}
+            />
+          );
+        case "iconButton":
+          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          return (
+            <IconButton
+              {...componentProps}
+              accessibilityLabel={iconButtonAccessibilityLabel}
+            />
+          );
+        case "badge":
+          return <Badge {...componentProps} />;
+        default:
+          return <></>;
+      }
+    }
+    return <></>;
+  }, [endElement, listItemAccessibilityLabel]);
+
+  return (
+    <View
+      style={IOListItemStyles.listItem}
+      testID={testID}
+      accessible={endElement === undefined ? true : false}
+      accessibilityLabel={listItemAccessibilityLabel}
+    >
+      <View style={IOListItemStyles.listItemInner}>
+        {iconName && (
+          <View style={{ marginRight: IOListItemVisualParams.actionMargin }}>
+            <Icon
+              name={iconName}
+              color={iconColor ?? theme["icon-decorative"]}
+              size={IOListItemVisualParams.iconSize}
+            />
+          </View>
+        )}
+        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        {endElement && (
+          <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
+            {listItemInfoAction()}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default ListItemHeader;