@pagopa/io-app-design-system 4.0.1 → 4.2.0

package/lib/typescript/components/stack/Stack.d.ts

@@ -1,21 +1,24 @@
-import React, { ReactNode } from "react";
+import React, { PropsWithChildren } from "react";
 import { ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
-type AllowedStyleProps = Pick<ViewStyle, "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap">;
-type Stack = {
+type AllowedStyleProps = Pick<ViewStyle, "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width">;
+type Stack = PropsWithChildren<{
     space?: IOSpacer;
-    children: ReactNode;
     style?: AllowedStyleProps;
+}>;
+type BaseStack = Stack & {
+    orientation: "vertical" | "horizontal";
 };
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export declare const HStack: ({ space, children, style }: Stack) => React.JSX.Element;
+declare const Stack: ({ space, style, orientation, children }: BaseStack) => React.JSX.Element;
+export declare const HStack: ({ children, ...props }: Stack) => React.JSX.Element;
 /**
 Vertical Stack component
 @param {IOSpacer} space
  */
-export declare const VStack: ({ space, children, style }: Stack) => React.JSX.Element;
+export declare const VStack: ({ children, ...props }: Stack) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Stack.d.ts.map

package/lib/typescript/components/stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,iBAAiB,GAAG,IAAI,CAC3B,SAAS,EACT,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAC/D,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,+BAAgC,KAAK,sBAWvD,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,MAAM,+BAAgC,KAAK,sBAWvD,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,iBAAiB,GAAG,IAAI,CAC3B,SAAS,EACT,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACzE,CAAC;AAEF,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B,CAAC,CAAC;AAEH,KAAK,SAAS,GAAG,KAAK,GAAG;IACvB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC,CAAC;AAEF;;;GAGG;AAEH,QAAA,MAAM,KAAK,4CAKR,SAAS,sBAWX,CAAC;AAEF,eAAO,MAAM,MAAM,2BAA4B,KAAK,sBAInD,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,MAAM,2BAA4B,KAAK,sBAInD,CAAC"}

package/lib/typescript/core/IOColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,eACrB,gBAAgB,KAC3B,eAAe,qBAAqB,CAAC,CAAC,QAAQ,CAGhD,CAAC;AA0BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;;;CAW1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAexB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEvD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AACzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;CAQzB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,ymBAoCL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAoC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAmCzB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,0BAA0B,CAAC;AAE1C,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,CAAC,0BAA0B,CAAC,EACvC,cAAc,CAkBf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}
+{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,eACrB,gBAAgB,KAC3B,eAAe,qBAAqB,CAAC,CAAC,QAAQ,CAGhD,CAAC;AA0BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;;;CAW1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAexB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEvD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;CAQzB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,ymBAoCL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAoC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAmCzB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,0BAA0B,CAAC;AAE1C,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,CAAC,0BAA0B,CAAC,EACvC,cAAc,CAkBf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import {
+  ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
   PixelRatio,
@@ -17,13 +18,9 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOVisualCostants } from "../../core";
+import { IOVisualCostants, useIOThemeContext } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
-import {
-  IOColors,
-  IOColorsStatusBackground,
-  IOColorsStatusForeground
-} from "../../core/IOColors";
+import { IOColors, hexToRgba } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
@@ -75,38 +72,66 @@ type AlertType = AlertProps & AlertActionProps;
 
 type VariantStates = {
   icon: IOIcons;
-  background: IOColorsStatusBackground;
-  foreground: IOColorsStatusForeground;
+  background: ColorValue;
+  foreground: IOColors;
 };
 
 // COMPONENT CONFIGURATION
 
-const mapVariantStates: Record<
+const mapVariantStatesLightMode: Record<
   NonNullable<AlertType["variant"]>,
   VariantStates
 > = {
   error: {
     icon: "errorFilled",
-    background: "error-100",
+    background: IOColors["error-100"],
     foreground: "error-850"
   },
   warning: {
     icon: "warningFilled",
-    background: "warning-100",
+    background: IOColors["warning-100"],
     foreground: "warning-850"
   },
   info: {
     icon: "infoFilled",
-    background: "info-100",
+    background: IOColors["info-100"],
     foreground: "info-850"
   },
   success: {
     icon: "success",
-    background: "success-100",
+    background: IOColors["success-100"],
     foreground: "success-850"
   }
 };
 
+const bgOpacityDarkMode = 0.2;
+
+const mapVariantStatesDarkMode: Record<
+  NonNullable<AlertType["variant"]>,
+  VariantStates
+> = {
+  error: {
+    icon: "errorFilled",
+    background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode),
+    foreground: "error-100"
+  },
+  warning: {
+    icon: "warningFilled",
+    background: hexToRgba(IOColors["warning-400"], bgOpacityDarkMode),
+    foreground: "warning-100"
+  },
+  info: {
+    icon: "infoFilled",
+    background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode),
+    foreground: "info-100"
+  },
+  success: {
+    icon: "success",
+    background: hexToRgba(IOColors["success-400"], bgOpacityDarkMode),
+    foreground: "success-100"
+  }
+};
+
 export const Alert = React.forwardRef<View, AlertType>(
   (
     {
@@ -121,6 +146,7 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
+    const { themeType } = useIOThemeContext();
     const isPressed: SharedValue<number> = useSharedValue(0);
 
     const [isMultiline, setIsMultiline] = useState(false);
@@ -164,6 +190,11 @@ export const Alert = React.forwardRef<View, AlertType>(
       isPressed.value = 0;
     }, [isPressed]);
 
+    const mapVariantStates =
+      themeType === "light"
+        ? mapVariantStatesLightMode
+        : mapVariantStatesDarkMode;
+
     const renderMainBlock = () => (
       <>
         <View
@@ -226,7 +257,7 @@ export const Alert = React.forwardRef<View, AlertType>(
         style={[
           styles.container,
           fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
-          { backgroundColor: IOColors[mapVariantStates[variant].background] }
+          { backgroundColor: mapVariantStates[variant].background }
         ]}
         testID={testID}
         accessible={false}
@@ -254,7 +285,7 @@ export const Alert = React.forwardRef<View, AlertType>(
           style={[
             styles.container,
             fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
-            { backgroundColor: IOColors[mapVariantStates[variant].background] },
+            { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
             !fullWidth && pressedAnimationStyle
           ]}

package/src/components/banner/Banner.tsx

@@ -8,8 +8,9 @@ import {
   ViewStyle
 } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   interpolate,
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -22,26 +23,26 @@ import {
   IOBannerSmallVSpacing,
   IOScaleValues,
   IOSpringValues,
-  IOStyles
+  IOStyles,
+  useIOExperimentalDesign,
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
-import { IOColors } from "../../core/IOColors";
+import { hexToRgba, IOColors } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
-import { ButtonLink, IconButton } from "../buttons";
+import { IconButton } from "../buttons";
 import {
-  IOPictogramSizeScale,
   IOPictogramsBleed,
+  IOPictogramSizeScale,
   PictogramBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, buttonTextFontSize, H6, IOText } from "../typography";
 
 /* Styles */
-const colorTitle: IOColors = "blueIO-850";
-const colorContent: IOColors = "grey-700";
-const colorCloseButton: IconButton["color"] = "neutral";
 const sizePictogramBig: IOPictogramSizeScale = 80;
 const sizePictogramSmall: IOPictogramSizeScale = 64;
-const closeButtonDistanceFromEdge: number = 4;
+const closeButtonDistanceFromEdge: number = 6;
 const closeButtonOpacity = 0.6;
 const sizeBigPadding = IOBannerBigSpacing;
 const sizeSmallHPadding = IOBannerSmallHSpacing;
@@ -66,15 +67,6 @@ const styles = StyleSheet.create({
   }
 });
 
-const dynamicContainerStyles = (
-  size: BaseBannerProps["size"],
-  color: BaseBannerProps["color"]
-): ViewStyle => ({
-  backgroundColor: IOColors[mapBackgroundColor[color]],
-  paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
-  paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
-});
-
 /* Component Types */
 
 type BaseBannerProps = WithTestID<{
@@ -136,7 +128,7 @@ export const bannerBackgroundColours: Array<BaseBannerProps["color"]> = [
   "turquoise"
 ];
 
-const mapBackgroundColor: Record<
+const mapBackgroundColorLightMode: Record<
   NonNullable<BaseBannerProps["color"]>,
   IOColors
 > = {
@@ -144,6 +136,14 @@ const mapBackgroundColor: Record<
   turquoise: "turquoise-50"
 };
 
+const mapBackgroundColorDarkMode: Record<
+  NonNullable<BaseBannerProps["color"]>,
+  IOColors
+> = {
+  neutral: "grey-50",
+  turquoise: "turquoise-300"
+};
+
 export const Banner = ({
   viewRef,
   size,
@@ -159,7 +159,27 @@ export const Banner = ({
   accessibilityLabel,
   testID
 }: Banner) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: SharedValue<number> = useSharedValue(0);
+
+  const { isExperimental } = useIOExperimentalDesign();
+  const { themeType } = useIOThemeContext();
+  const theme = useIOTheme();
+
+  // Dynamic colors
+  const colorTitle: IOColors = themeType === "dark" ? "grey-50" : "blueIO-850";
+  const colorCloseButton: IconButton["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+  const colorMainButton =
+    themeType === "dark" ? "blueIO-200" : theme["interactiveElem-default"];
+
+  const dynamicContainerStyles: ViewStyle = {
+    backgroundColor:
+      themeType === "dark"
+        ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
+        : IOColors[mapBackgroundColorLightMode[color]],
+    paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
+    paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
+  };
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -178,7 +198,7 @@ export const Banner = ({
       progressPressed.value,
       [0, 1],
       [1, animationScaleValue],
-      Extrapolate.CLAMP
+      Extrapolation.CLAMP
     );
 
     return {
@@ -221,7 +241,7 @@ export const Banner = ({
         )}
         {content && (
           <>
-            <BodySmall color={colorContent} weight={"Regular"}>
+            <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
               {content}
             </BodySmall>
             {action && <VSpacer size={8} />}
@@ -229,20 +249,35 @@ export const Banner = ({
         )}
         {action && (
           /* Disable pointer events to avoid
-                      pressed state on the button */
+             pressed state on the button */
           <View
             pointerEvents="none"
-            accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
+            accessible={true}
+            accessibilityElementsHidden
+            accessibilityLabel={action}
+            accessibilityRole="button"
           >
             <VSpacer size={4} />
-            <ButtonLink color="primary" onPress={onPress} label={action} />
+            <IOText
+              font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+              weight="Semibold"
+              color={colorMainButton}
+              size={buttonTextFontSize}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              // A11y
+              accessible={false}
+              importantForAccessibility="no-hide-descendants"
+              accessibilityElementsHidden={true}
+            >
+              {action}
+            </IOText>
           </View>
         )}
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
         <PictogramBleed
-          pictogramStyle="dark-content"
           name={pictogramName}
           size={size === "big" ? sizePictogramBig : sizePictogramSmall}
         />
@@ -272,7 +307,7 @@ export const Banner = ({
       <Animated.View
         style={[
           styles.container,
-          dynamicContainerStyles(size, color),
+          dynamicContainerStyles,
           pressedAnimationStyle
         ]}
       >
@@ -285,7 +320,7 @@ export const Banner = ({
     <View
       ref={viewRef}
       testID={testID}
-      style={[styles.container, dynamicContainerStyles(size, color)]}
+      style={[styles.container, dynamicContainerStyles]}
       // A11y related props
       accessible={false}
       accessibilityHint={accessibilityHint}

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

@@ -101,6 +101,9 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       />
       <View
         accessibilityElementsHidden={true}
+        accessibilityLabel="Action text"
+        accessibilityRole="button"
+        accessible={true}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
       >
@@ -111,104 +114,30 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             }
           }
         />
-        <View
-          accessibilityLabel="Action text"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 14,
-              "left": 24,
-              "right": 24,
-              "top": 14,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          onTouchEnd={[Function]}
+        <Text
+          accessibilityElementsHidden={true}
+          accessible={false}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
           style={
-            {
-              "alignSelf": "flex-start",
-            }
+            [
+              {},
+              {
+                "color": "#0B3EE3",
+                "fontFamily": "Titillio",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": undefined,
+              },
+            ]
           }
         >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "elevation": 0,
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "textAlignVertical": "center",
-                },
-                false,
-                {},
-                {
-                  "transform": [
-                    {
-                      "scale": undefined,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              accessible={false}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.25}
-              numberOfLines={1}
-              style={
-                [
-                  {},
-                  {
-                    "color": "#0E0F13",
-                    "fontFamily": "Titillio",
-                    "fontSize": 16,
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "color": undefined,
-                  },
-                ]
-              }
-            >
-              Action text
-            </Text>
-          </View>
-        </View>
+          Action text
+        </Text>
       </View>
     </View>
     <View
@@ -451,6 +380,9 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       />
       <View
         accessibilityElementsHidden={true}
+        accessibilityLabel="Action text"
+        accessibilityRole="button"
+        accessible={true}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
       >
@@ -461,104 +393,30 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           }
         />
-        <View
-          accessibilityLabel="Action text"
-          accessibilityRole="button"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 14,
-              "left": 24,
-              "right": 24,
-              "top": 14,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          onTouchEnd={[Function]}
+        <Text
+          accessibilityElementsHidden={true}
+          accessible={false}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          importantForAccessibility="no-hide-descendants"
+          maxFontSizeMultiplier={1.25}
+          numberOfLines={1}
           style={
-            {
-              "alignSelf": "flex-start",
-            }
+            [
+              {},
+              {
+                "color": "#0B3EE3",
+                "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": undefined,
+              },
+            ]
           }
         >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "elevation": 0,
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "textAlignVertical": "center",
-                },
-                false,
-                {},
-                {
-                  "transform": [
-                    {
-                      "scale": undefined,
-                    },
-                  ],
-                },
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              accessible={false}
-              allowFontScaling={false}
-              ellipsizeMode="tail"
-              importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.25}
-              numberOfLines={1}
-              style={
-                [
-                  {},
-                  {
-                    "color": "#0E0F13",
-                    "fontFamily": "Titillium Sans Pro",
-                    "fontSize": 16,
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "color": undefined,
-                  },
-                ]
-              }
-            >
-              Action text
-            </Text>
-          </View>
-        </View>
+          Action text
+        </Text>
       </View>
     </View>
     <View