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

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.70718 0.292969L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.76944 3.18365C0.687055 4.10081 1.86265e-08 5.47017 1.86265e-08 7V10V17V22L3.55279 20.2236C3.83431 20.0828 4.16569 20.0828 4.44721 20.2236L8 22L11.5528 20.2236C11.8343 20.0828 12.1657 20.0828 12.4472 20.2236L16 22L19.0572 20.4714L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6835 23.7072 22.293L23.707 22.2931L1.70703 0.29312L1.70718 0.292969ZM24 19.7577V17V10V7C24 4.23858 21.7614 2 19 2H6.24234L8.24234 4H19C20.6569 4 22 5.34315 22 7V10V17V17.7577L24 19.7577ZM13.2385 8.99616H18.0019C18.5531 8.99616 19 8.54931 19 7.99808C19 7.44686 18.5531 7 18.0019 7H11.2423L13.2385 8.99616ZM11.5791 12.9933L17.5665 18.9807L16 19.7639L13.3416 18.4348C12.4971 18.0125 11.5029 18.0125 10.6584 18.4348L8 19.7639L5.34164 18.4348C4.49706 18.0125 3.50294 18.0125 2.65836 18.4348L2 18.7639V17V10V7C2 6.02221 2.46779 5.15368 3.19177 4.60598L5.64866 7.06287C5.26977 7.2045 5 7.56979 5 7.99808C5 8.54931 5.44686 8.99616 5.99808 8.99616H7.58195L9.58579 11H5.99665C5.44621 11 5 11.4462 5 11.9966C5 12.5471 5.44621 12.9933 5.99665 12.9933H11.5791Z" fill="#BBC2D6"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C2.23858 2 0 4.23858 0 7V10V17V22L3.55279 20.2236C3.83431 20.0828 4.16569 20.0828 4.44721 20.2236L8 22L11.5528 20.2236C11.8343 20.0828 12.1657 20.0828 12.4472 20.2236L16 22L19.5528 20.2236C19.8343 20.0828 20.1657 20.0828 20.4472 20.2236L24 22V17V10V7C24 4.23858 21.7614 2 19 2H5ZM22 10V7C22 5.34315 20.6569 4 19 4H5C3.34315 4 2 5.34315 2 7V10V17V18.7639L2.65836 18.4348C3.50294 18.0125 4.49706 18.0125 5.34164 18.4348L8 19.7639L10.6584 18.4348C11.5029 18.0125 12.4971 18.0125 13.3416 18.4348L16 19.7639L18.6584 18.4348C19.5029 18.0125 20.4971 18.0125 21.3416 18.4348L22 18.7639V17V10ZM5.99808 7C5.44686 7 5 7.44686 5 7.99808C5 8.54931 5.44686 8.99616 5.99808 8.99616H18.0019C18.5531 8.99616 19 8.54931 19 7.99808C19 7.44686 18.5531 7 18.0019 7H5.99808ZM6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H12.0269C12.5792 13 13.0269 12.5523 13.0269 12C13.0269 11.4477 12.5792 11 12.0269 11H6Z" fill="#BBC2D6"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 22C1.55228 22 2 22.4477 2 23C2 23.5523 1.55228 24 1 24C0.447715 24 0 23.5523 0 23C0 22.4477 0.447715 22 1 22ZM1 15C0.447715 15 0 15.4477 0 16C0 16.5523 0.447715 17 1 17C1.78793 17 2.56815 17.1552 3.2961 17.4567C4.02405 17.7583 4.68549 18.2002 5.24264 18.7574C5.79979 19.3145 6.24175 19.9759 6.54328 20.7039C6.84481 21.4319 7 22.2121 7 23C7 23.5523 7.44771 24 8 24C8.55229 24 9 23.5523 9 23C9 21.9494 8.79307 20.9091 8.39104 19.9385C7.989 18.9679 7.39972 18.086 6.65685 17.3431C5.91399 16.6003 5.03207 16.011 4.06147 15.609C3.09086 15.2069 2.05057 15 1 15ZM0 9C0 8.44772 0.447716 8 1 8C2.96983 8 4.92037 8.38799 6.74025 9.14181C8.56014 9.89563 10.2137 11.0005 11.6066 12.3934C12.9995 13.7863 14.1044 15.4399 14.8582 17.2597C15.612 19.0796 16 21.0302 16 23C16 23.5523 15.5523 24 15 24C14.4477 24 14 23.5523 14 23C14 21.2928 13.6637 19.6023 13.0104 18.0251C12.3571 16.4479 11.3996 15.0148 10.1924 13.8076C8.98523 12.6005 7.55212 11.6429 5.97488 10.9896C4.39765 10.3363 2.70718 10 1 10C0.447716 10 0 9.55229 0 9ZM0.999998 1C0.447714 1 0 1.44772 0 2C0 2.55228 0.447714 3 1 3C3.62644 3 6.22716 3.51731 8.65367 4.52241C11.0802 5.5275 13.285 7.00069 15.1421 8.85786C16.9993 10.715 18.4725 12.9198 19.4776 15.3463C20.4827 17.7728 21 20.3736 21 23C21 23.5523 21.4477 24 22 24C22.5523 24 23 23.5523 23 23C23 20.1109 22.431 17.2501 21.3253 14.581C20.2197 11.9118 18.5992 9.48654 16.5564 7.44365C14.5135 5.40076 12.0882 3.78025 9.41903 2.67465C6.74987 1.56905 3.88908 1 0.999998 1Z" fill="#BBC2D6"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.0692 1H16.1192C14.4002 1 12.9076 1.55894 12.0012 2.43149C11.0924 1.55894 9.59977 1 7.88084 1H0.928523C0.415514 1 0 1.41429 0 1.92578V20.3349C0 20.8464 0.415514 21 0.928523 21H7.88084C9.70655 21 11 21.5454 11 22.2999C11 22.8114 11.4858 23 11.9988 23C12.5118 23 13 22.8114 13 22.2999C13 21.5454 14.2911 21 16.1168 21H23.0692C23.5822 21 23.9977 20.8464 23.9977 20.3349V1.92578C23.9977 1.41429 23.5822 1 23.0692 1ZM11 19.5C10.1365 19.0244 9.10185 19 7.882 19H2.25C2.11193 19 2 18.8881 2 18.75V3.25C2 3.11193 2.11193 3 2.25 3H4.86894H7.88084C9.70655 3 11.0703 3.69633 11.0703 4.45084L11 12.309V19.5ZM22 18.75C22 18.8881 21.8881 19 21.75 19H16.1192C14.8982 19 13.8635 19.0244 13 19.5V12.3096V4.45084C13 3.69633 14.2935 3 16.1192 3H21.75C21.8881 3 22 3.11193 22 3.25V18.75ZM15 6C15 5.44772 15.4477 5 16 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H16C15.4477 7 15 6.55228 15 6ZM16 8C15.4477 8 15 8.44772 15 9C15 9.55229 15.4477 10 16 10H19C19.5523 10 20 9.55229 20 9C20 8.44772 19.5523 8 19 8H16Z" fill="#BBC2D6"/></svg>

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H4C4.55228 2 5 1.55228 5 1C5 0.447715 4.55228 0 4 0H1ZM14 1C14 0.447715 14.4477 0 15 0H18C18.5523 0 19 0.447715 19 1C19 1.55228 18.5523 2 18 2H15C14.4477 2 14 1.55228 14 1ZM9.5 3C8.11929 3 7 4.11929 7 5.5V12.08C6.60172 11.9559 6.18919 11.9077 5.79201 11.9408C5.22346 11.9882 4.63715 12.2081 4.18839 12.6708C3.73043 13.143 3.5 13.7814 3.5 14.4997C3.5 16.0196 4.51975 16.7964 5.28632 17.3804L5.33786 17.4197L5.37781 17.4502C6.14711 18.0368 6.9446 18.6449 7.58633 19.8088C8.66852 22.2764 11.133 24 14 24C17.866 24 21 20.866 21 17V12.5C21 11.1193 19.8807 10 18.5 10C18.1874 10 17.8882 10.0574 17.6123 10.1622C17.169 9.46363 16.3886 9 15.5 9C15.1874 9 14.8882 9.05738 14.6123 9.16218C14.169 8.46363 13.3886 8 12.5 8C12.3288 8 12.1616 8.01721 12 8.05001V5.5C12 4.11929 10.8807 3 9.5 3ZM9.50985 19.2022C9.4926 19.1471 9.47033 19.0928 9.44283 19.0397C9.4254 19.0061 9.40785 18.9728 9.3902 18.9398C9.13891 18.3433 9 17.6879 9 17V14.0137C9.00014 14.0039 9.00014 13.9942 9 13.9845V5.5C9 5.22386 9.22386 5 9.5 5C9.77614 5 10 5.22386 10 5.5V10.5V14C10 14.5523 10.4477 15 11 15C11.5523 15 12 14.5523 12 14V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V11.5V14C13 14.5523 13.4477 15 14 15C14.5523 15 15 14.5523 15 14V11.5C15 11.2239 15.2239 11 15.5 11C15.7761 11 16 11.2239 16 11.5V12.5V14C16 14.5523 16.4477 15 17 15C17.5523 15 18 14.5523 18 14V12.5C18 12.2239 18.2239 12 18.5 12C18.7761 12 19 12.2239 19 12.5V17C19 19.7614 16.7614 22 14 22C12.0289 22 10.3242 20.8594 9.50985 19.2022ZM7 14.3495V16.1747C6.86978 16.0725 6.74438 15.9769 6.62558 15.8865L6.55089 15.8295C5.68366 15.168 5.5 14.9452 5.5 14.4997C5.5 14.2181 5.58207 14.1065 5.62411 14.0632C5.67535 14.0103 5.77654 13.949 5.95799 13.9339C6.28354 13.9068 6.69917 14.0471 7 14.3495ZM16.7071 5.29304L14.7071 3.29304C14.3166 2.90252 13.6834 2.90252 13.2929 3.29304C12.9024 3.68357 12.9024 4.31673 13.2929 4.70726L15.2929 6.70726C15.6834 7.09778 16.3166 7.09778 16.7071 6.70726C17.0976 6.31673 17.0976 5.68357 16.7071 5.29304ZM5.70696 3.29289C6.09748 3.68342 6.09748 4.31658 5.70696 4.70711L3.70696 6.70711C3.31643 7.09763 2.68327 7.09763 2.29274 6.70711C1.90222 6.31658 1.90222 5.68342 2.29274 5.29289L4.29274 3.29289C4.68327 2.90237 5.31643 2.90237 5.70696 3.29289Z" fill="#BBC2D6"/></svg>

package/src/components/icons/timestamp.txt

@@ -0,0 +1 @@
+2023-10-30T09:55:59.147Z

package/src/components/index.tsx

@@ -23,3 +23,4 @@ export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
 export * from "./layout";
+export * from "./numberpad";

package/src/components/layout/GradientBottomActions.tsx

@@ -1,18 +1,23 @@
 import * as React from "react";
-import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import Animated from "react-native-reanimated";
+import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { IOColors, hexToRgba, IOSpacer, IOVisualCostants } from "../../core";
+import {
+  ButtonLink,
+  ButtonLinkProps,
+  ButtonSolid,
+  ButtonSolidProps
+} from "../buttons";
 import { VSpacer } from "../spacer";
 
 export type GradientBottomActions = WithTestID<{
   transitionAnimStyle: Animated.AnimateStyle<StyleProp<ViewStyle>>;
   dimensions: GradientBottomActionsDimensions;
-  // Accepted components: ButtonSolid, ButtonLink
-  // Don't use any components other than this, please.
-  primaryAction?: React.ReactNode;
-  secondaryAction?: React.ReactNode;
+  // Accepted components: ButtonSolid for the primaryAction, ButtonLink for the secondaryAction
+  primaryActionProps?: Omit<ButtonSolidProps, "fullWidth">;
+  secondaryActionProps?: ButtonLinkProps;
   // Debug mode
   debugMode?: boolean;
 }>;
@@ -49,8 +54,8 @@ const styles = StyleSheet.create({
 });
 
 export const GradientBottomActions = ({
-  primaryAction,
-  secondaryAction,
+  primaryActionProps: primaryAction,
+  secondaryActionProps: secondaryAction,
   dimensions,
   transitionAnimStyle,
   debugMode,
@@ -99,7 +104,9 @@ export const GradientBottomActions = ({
       ]}
     />
     <View style={styles.buttonContainer} pointerEvents="box-none">
-      {primaryAction}
+      {primaryAction && (
+        <ButtonSolid fullWidth {...primaryAction}></ButtonSolid>
+      )}
 
       {secondaryAction && (
         <View
@@ -109,7 +116,7 @@ export const GradientBottomActions = ({
           }}
         >
           <VSpacer size={dimensions.spaceBetweenActions} />
-          {secondaryAction}
+          {<ButtonLink {...secondaryAction}></ButtonLink>}
         </View>
       )}
     </View>

package/src/components/layout/GradientScrollView.tsx

@@ -8,13 +8,13 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { WithTestID } from "../../utils/types";
 import {
-  IOVisualCostants,
-  buttonSolidHeight,
   IOSpacer,
-  IOSpacingScale
+  IOSpacingScale,
+  IOVisualCostants,
+  buttonSolidHeight
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import GradientBottomActions from "./GradientBottomActions";
 
 export type GradientScrollView = WithTestID<{
@@ -23,8 +23,8 @@ export type GradientScrollView = WithTestID<{
   debugMode?: boolean;
   // Accepted components: ButtonSolid, ButtonLink
   // Don't use any components other than this, please.
-  primaryAction: React.ReactNode;
-  secondaryAction?: React.ReactNode;
+  primaryActionProps: GradientBottomActions["primaryActionProps"];
+  secondaryActionProps?: GradientBottomActions["secondaryActionProps"];
 }>;
 
 // Extended gradient area above the actions
@@ -40,8 +40,8 @@ const extraSafeAreaMargin: IOSpacingScale = 8;
 
 export const GradientScrollView = ({
   children,
-  primaryAction,
-  secondaryAction,
+  primaryActionProps: primaryActionProps,
+  secondaryActionProps: secondaryActionProps,
   // Don't include safe area insets
   excludeSafeAreaMargins = false,
   debugMode = false,
@@ -65,20 +65,21 @@ export const GradientScrollView = ({
   /* When the secondary action is visible, add extra margin
 to avoid little space from iPhone bottom handle */
   const extraBottomMargin: number = useMemo(
-    () => (secondaryAction && insets.bottom !== 0 ? extraSafeAreaMargin : 0),
-    [insets.bottom, secondaryAction]
+    () =>
+      secondaryActionProps && insets.bottom !== 0 ? extraSafeAreaMargin : 0,
+    [insets.bottom, secondaryActionProps]
   );
 
   /* Total height of actions */
   const actionsArea: number = useMemo(
     () =>
-      primaryAction && secondaryAction
+      primaryActionProps && secondaryActionProps
         ? (buttonSolidHeight as number) +
           spaceBetweenActions +
           secondaryActionEstHeight +
           extraBottomMargin
         : buttonSolidHeight,
-    [extraBottomMargin, primaryAction, secondaryAction]
+    [extraBottomMargin, primaryActionProps, secondaryActionProps]
   );
 
   /* Total height of "Actions + Gradient" area */
@@ -103,13 +104,13 @@ to avoid little space from iPhone bottom handle */
 
   const safeBackgroundHeight = useMemo(
     () =>
-      secondaryAction
+      secondaryActionProps
         ? spaceBetweenActions +
           secondaryActionEstHeight +
           extraBottomMargin +
           bottomMargin
         : bottomMargin,
-    [bottomMargin, extraBottomMargin, secondaryAction]
+    [bottomMargin, extraBottomMargin, secondaryActionProps]
   );
 
   const handleScroll = useAnimatedScrollHandler(
@@ -149,8 +150,8 @@ to avoid little space from iPhone bottom handle */
       </Animated.ScrollView>
       <GradientBottomActions
         debugMode={debugMode}
-        primaryAction={primaryAction}
-        secondaryAction={secondaryAction}
+        primaryActionProps={primaryActionProps}
+        secondaryActionProps={secondaryActionProps}
         transitionAnimStyle={opacityTransition}
         dimensions={{
           bottomMargin,

package/src/components/listitems/ListItemInfo.tsx

@@ -1,39 +1,38 @@
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import React, { ComponentProps, useCallback, useMemo } from "react";
+import { View } from "react-native";
 import {
-  IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { Body, H6, LabelSmall } from "../typography";
+import { H6, LabelSmall } from "../typography";
+import { ButtonLink, IconButton } from "../buttons";
+
+type ButtonLinkActionProps = {
+  type: "buttonLink";
+  componentProps: ComponentProps<typeof ButtonLink>;
+};
+
+type IconButtonActionProps = {
+  type: "iconButton";
+  componentProps: ComponentProps<typeof IconButton>;
+};
+
+type ActionProps = ButtonLinkActionProps | IconButtonActionProps;
 
 export type ListItemInfo = WithTestID<{
   label: string;
   value: string | React.ReactNode;
   numberOfLines?: number;
   icon?: IOIcons;
-  // Accepted components: ButtonLink, IconButton
-  // Don't use any components other than these
-  action?: React.ReactNode;
+  action?: ActionProps;
   // Accessibility
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
 }>;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  textValue: {
-    fontSize: 18,
-    lineHeight: 24,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
-
 export const ListItemInfo = ({
   label,
   value,
@@ -43,51 +42,76 @@ export const ListItemInfo = ({
   accessibilityLabel,
   testID
 }: ListItemInfo) => {
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const componentValueToAccessibility = useMemo(
+    () => (typeof value === "string" ? value : ""),
+    [value]
+  );
 
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyItemInfoText = (
-    <>
-      {/* Let developer using a custom component (e.g: skeleton) */}
-      {typeof label === "string" ? (
-        <Body weight="Regular">{label}</Body>
-      ) : (
-        label
-      )}
-      {typeof value === "string" ? (
-        <Text
-          style={[legacyStyles.textValue, { color: IOColors.bluegreyDark }]}
-          numberOfLines={numberOfLines}
-        >
-          {value}
-        </Text>
-      ) : (
-        value
-      )}
-    </>
+  const listItemAccessibilityLabel = useMemo(
+    () =>
+      accessibilityLabel
+        ? accessibilityLabel
+        : `${label}; ${componentValueToAccessibility}`,
+    [label, componentValueToAccessibility, accessibilityLabel]
   );
 
-  const itemInfoText = (
-    <>
-      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-        {label}
-      </LabelSmall>
-      <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
-        {value}
-      </H6>
-    </>
+  const itemInfoTextComponent = useMemo(
+    () => (
+      <View
+        accessible={action === undefined ? true : false}
+        importantForAccessibility={
+          action === undefined ? "yes" : "no-hide-descendants"
+        }
+        accessibilityElementsHidden={action !== undefined}
+      >
+        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          {label}
+        </LabelSmall>
+        {typeof value === "string" ? (
+          <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
+            {value}
+          </H6>
+        ) : (
+          value
+        )}
+      </View>
+    ),
+    [label, value, numberOfLines, theme, action]
   );
 
-  const itemInfoTextComponent = isExperimental
-    ? itemInfoText
-    : legacyItemInfoText;
+  const listItemInfoAction = useCallback(() => {
+    if (action) {
+      const { type, componentProps } = action;
+
+      const accessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+      switch (type) {
+        case "buttonLink":
+          return (
+            <ButtonLink
+              {...componentProps}
+              accessibilityLabel={accessibilityLabel}
+            />
+          );
+        case "iconButton":
+          return (
+            <IconButton
+              {...componentProps}
+              accessibilityLabel={accessibilityLabel}
+            />
+          );
+        default:
+          return <></>;
+      }
+    }
+    return <></>;
+  }, [action, listItemAccessibilityLabel]);
 
   return (
     <View
       style={IOListItemStyles.listItem}
       testID={testID}
-      accessible={true}
+      accessible={action === undefined ? true : false}
       accessibilityLabel={accessibilityLabel}
     >
       <View style={IOListItemStyles.listItemInner}>
@@ -103,7 +127,7 @@ export const ListItemInfo = ({
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         {action && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
-            {action}
+            {listItemInfoAction()}
           </View>
         )}
       </View>

package/src/components/listitems/ListItemNav.tsx

@@ -29,8 +29,8 @@ import {
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { Body, H6, LabelSmall } from "../typography";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { Body, H6, LabelSmall } from "../typography";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -51,9 +51,9 @@ type ListItemNavPartialProps = WithTestID<{
 }>;
 
 export type ListItemNavGraphicProps =
-  | { icon?: never; paymentLogo: IOLogoPaymentType }
-  | { icon: IOIcons; paymentLogo?: never }
-  | { icon?: never; paymentLogo?: never };
+  | { icon?: never; iconColor?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; iconColor?: IOColors; paymentLogo?: never }
+  | { icon?: never; iconColor?: never; paymentLogo?: never };
 
 export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
 
@@ -62,6 +62,7 @@ export const ListItemNav = ({
   description,
   onPress,
   icon,
+  iconColor = "grey-450",
   paymentLogo,
   accessibilityLabel,
   testID
@@ -108,7 +109,9 @@ export const ListItemNav = ({
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  const navIconColor = isExperimental
+    ? theme["interactiveElem-default"]
+    : "blue";
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -172,7 +175,7 @@ export const ListItemNav = ({
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
               <Icon
                 name={icon}
-                color="grey-450"
+                color={iconColor}
                 size={IOListItemVisualParams.iconSize}
               />
             </View>
@@ -189,7 +192,7 @@ export const ListItemNav = ({
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={iconColor}
+              color={navIconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>

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

@@ -223,55 +223,71 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        color="bluegrey"
-        defaultColor="bluegrey"
-        defaultWeight="Regular"
-        font="TitilliumWeb"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 24,
+      <View
+        accessibilityElementsHidden={false}
+        accessible={true}
+        importantForAccessibility="yes"
+      >
+        <Text
+          allowFontScaling={false}
+          color="grey-700"
+          defaultColor="blue"
+          defaultWeight="Bold"
+          font="TitilliumWeb"
+          fontStyle={
+            {
+              "fontSize": 14,
+            }
           }
-        }
-        style={
-          [
+          style={
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "#555C70",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+            ]
+          }
+          weight="Regular"
+        >
+          label
+        </Text>
+        <Text
+          allowFontScaling={false}
+          color="black"
+          defaultColor="black"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
+          fontStyle={
             {
               "fontSize": 16,
               "lineHeight": 24,
-            },
-            {
-              "color": "#475A6D",
-              "fontFamily": "Titillium Web",
-              "fontStyle": "normal",
-              "fontWeight": "400",
-            },
-          ]
-        }
-        weight="Regular"
-      >
-        label
-      </Text>
-      <Text
-        numberOfLines={2}
-        style={
-          [
-            {
-              "fontFamily": "Titillium Web",
-              "fontSize": 18,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 24,
-            },
-            {
-              "color": "#17324D",
-            },
-          ]
-        }
-      >
-        testValue
-      </Text>
+            }
+          }
+          numberOfLines={2}
+          style={
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 24,
+              },
+              {
+                "color": "#0E0F13",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+            ]
+          }
+          weight="SemiBold"
+        >
+          testValue
+        </Text>
+      </View>
     </View>
   </View>
 </View>

package/src/components/numberpad/NumberButton.tsx

@@ -0,0 +1,132 @@
+import React, { useCallback, useMemo } from "react";
+import { Pressable } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import {
+  IOColors,
+  IONumberPadButtonStyles,
+  IOScaleValues,
+  IOSpringValues,
+  useIOExperimentalDesign
+} from "../../core";
+import { H3 } from "../typography";
+
+type NumberButtonVariantType = "light" | "dark";
+
+type NumberButtonProps = {
+  variant: NumberButtonVariantType;
+  number: number;
+  onPress: (number: number) => void;
+};
+
+type ColorMapVariant = {
+  background: IOColors;
+  pressed: IOColors;
+  foreground: IOColors;
+};
+
+const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blueIO-500"
+  },
+  dark: {
+    background: "blueIO-400",
+    pressed: "blueIO-200",
+    foreground: "white"
+  }
+};
+
+const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blue"
+  },
+  dark: {
+    background: "blue",
+    pressed: "blue-600",
+    foreground: "white"
+  }
+};
+
+export const NumberButton = ({
+  number,
+  variant,
+  onPress
+}: NumberButtonProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const colors = useMemo(
+    () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
+    [variant, isExperimental]
+  );
+  const isPressed = useSharedValue(0);
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const bgColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [IOColors[colors.background], IOColors[colors.pressed]]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor: bgColor,
+      transform: [{ scale }]
+    };
+  });
+
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return (
+    <Pressable
+      accessible={true}
+      accessibilityRole={"button"}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={() => onPress(number)}
+    >
+      <Animated.View
+        style={[
+          IONumberPadButtonStyles.button,
+          IONumberPadButtonStyles.circularShape,
+          IONumberPadButtonStyles.buttonSize,
+          pressedAnimationStyle
+        ]}
+      >
+        <H3 color={colors.foreground}>{number}</H3>
+      </Animated.View>
+    </Pressable>
+  );
+};