[IOBP-429] listItemHeader value variant

example/src/pages/ListItem.tsx

@@ -4,6 +4,7 @@ import {
   IOThemeContext,
   Icon,
   ListItemAction,
+  ListItemAmount,
   ListItemHeader,
   ListItemInfo,
   ListItemInfoCopy,
@@ -73,6 +74,15 @@ export const ListItems = () => {
           </H2>
           {renderListItemHeader()}
 
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemAmount
+          </H2>
+          {renderListItemAmount()}
+
           <H2
             color={theme["textHeading-default"]}
             weight={"SemiBold"}
@@ -489,6 +499,17 @@ const renderListItemHeader = () => (
   </ComponentViewerBox>
 );
 
+const renderListItemAmount = () => (
+  <ComponentViewerBox name="ListItemAmount">
+    <ListItemAmount label="Amount" valueString="€ 1.000,00" />
+    <ListItemAmount
+      iconName="creditCard"
+      label="Amount with card "
+      valueString="€ 1.000,00"
+    />
+  </ComponentViewerBox>
+);
+
 /* LIST ITEM TRANSACTION */
 
 /* Mock assets */

src/components/listitems/ListItemAmount.tsx

@@ -0,0 +1,95 @@
+import React, { ComponentProps, useMemo } from "react";
+import { View } from "react-native";
+import {
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOSpacingScale,
+  IOStyles,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { H3, H6 } from "../typography";
+
+type ValueProps = ComponentProps<typeof H3>;
+
+type IconProps =
+  | {
+      iconName: IOIcons;
+      iconColor?: ComponentProps<typeof Icon>["color"];
+    }
+  | { iconName?: never; iconColor?: never };
+
+export type ListItemAmount = WithTestID<{
+  label: string;
+  valueElementProps?: ValueProps;
+  valueString: string;
+  // Accessibility
+  accessibilityLabel?: string;
+}> &
+  IconProps;
+
+const iconMargin: IOSpacingScale = 8;
+
+export const ListItemAmount = ({
+  label,
+  iconName,
+  iconColor,
+  valueElementProps,
+  valueString,
+  accessibilityLabel,
+  testID
+}: ListItemAmount) => {
+  const theme = useIOTheme();
+
+  const listItemAccessibilityLabel = useMemo(
+    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
+    [label, accessibilityLabel]
+  );
+
+  const itemInfoTextComponent = (
+    <View
+      accessible={false}
+      importantForAccessibility={"no-hide-descendants"}
+      accessibilityElementsHidden={false}
+    >
+      <H6 weight="Regular" color={theme["textBody-tertiary"]}>
+        {label}
+      </H6>
+    </View>
+  );
+
+  return (
+    <View
+      style={IOListItemStyles.listItem}
+      testID={testID}
+      accessible
+      accessibilityLabel={listItemAccessibilityLabel}
+    >
+      <View style={IOListItemStyles.listItemInner}>
+        {iconName && (
+          <View style={{ marginRight: iconMargin }}>
+            <Icon
+              name={iconName}
+              color={iconColor ?? theme["icon-decorative"]}
+              size={IOListItemVisualParams.iconSize}
+            />
+          </View>
+        )}
+        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <H3
+          weight={"SemiBold"}
+          color={"black"}
+          {...valueElementProps}
+          accessibilityLabel={`${listItemAccessibilityLabel}; ${
+            valueElementProps?.accessibilityLabel ?? ""
+          }`}
+        >
+          {valueString}
+        </H3>
+      </View>
+    </View>
+  );
+};
+
+export default ListItemAmount;

src/components/listitems/index.tsx

@@ -10,3 +10,4 @@ export * from "./ListItemSwitch";
 export * from "./ListItemCheckbox";
 export * from "./ListItemRadio";
 export * from "./ListItemRadioWithAmount";
+export * from "./ListItemAmount";