npm - @ovotech/element-native - Versions diffs - 5.5.0 → 5.6.0 - Mend

@ovotech/element-native 5.5.0 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/dist/components/Cards/BalanceCard/BalanceCard.styles.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-export declare const CardWithBalance: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, {
+export declare const CardWithBalance: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, onSelect, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, {
     color: {
         neutral: {
             "20": string;
@@ -38,6 +38,7 @@ export declare const CardWithBalance: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const CardWithBalance: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const CardWithBalance: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -615,6 +618,7 @@ export declare const CardWrapper: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -657,6 +661,7 @@ export declare const CardWrapper: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -665,6 +670,7 @@ export declare const CardWrapper: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1192,6 +1198,7 @@ export declare const ImageWrapper: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1234,6 +1241,7 @@ export declare const ImageWrapper: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1242,6 +1250,7 @@ export declare const ImageWrapper: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1769,6 +1778,7 @@ export declare const EyebrowContainer: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1811,6 +1821,7 @@ export declare const EyebrowContainer: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1819,6 +1830,7 @@ export declare const EyebrowContainer: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2344,6 +2356,7 @@ export declare const BalanceContainer: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2386,6 +2399,7 @@ export declare const BalanceContainer: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2394,6 +2408,7 @@ export declare const BalanceContainer: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2919,6 +2934,7 @@ export declare const BadgeContainer: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2961,6 +2977,7 @@ export declare const BadgeContainer: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2969,6 +2986,7 @@ export declare const BadgeContainer: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3498,6 +3516,7 @@ export declare const PayGText: import("styled-components").StyledComponent<(prop
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3540,6 +3559,7 @@ export declare const PayGText: import("styled-components").StyledComponent<(prop
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3548,6 +3568,7 @@ export declare const PayGText: import("styled-components").StyledComponent<(prop
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4077,6 +4098,7 @@ export declare const PayMText: import("styled-components").StyledComponent<(prop
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4119,6 +4141,7 @@ export declare const PayMText: import("styled-components").StyledComponent<(prop
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4127,6 +4150,7 @@ export declare const PayMText: import("styled-components").StyledComponent<(prop
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4652,6 +4676,7 @@ export declare const CtaBarContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4694,6 +4719,7 @@ export declare const CtaBarContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4702,6 +4728,7 @@ export declare const CtaBarContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5227,6 +5254,7 @@ export declare const CtaBar: import("styled-components").StyledComponent<import(
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5269,6 +5297,7 @@ export declare const CtaBar: import("styled-components").StyledComponent<import(
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5277,6 +5306,7 @@ export declare const CtaBar: import("styled-components").StyledComponent<import(
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5804,6 +5834,7 @@ export declare const CreditContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5846,6 +5877,7 @@ export declare const CreditContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5854,6 +5886,7 @@ export declare const CreditContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -6456,6 +6489,7 @@ export declare const StyledDisplay4: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -6498,6 +6532,7 @@ export declare const StyledDisplay4: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -6506,6 +6541,7 @@ export declare const StyledDisplay4: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -7035,6 +7071,7 @@ export declare const StyledHeading1: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -7077,6 +7114,7 @@ export declare const StyledHeading1: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -7085,6 +7123,7 @@ export declare const StyledHeading1: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -7610,6 +7649,7 @@ export declare const ErrorContainer: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -7652,6 +7692,7 @@ export declare const ErrorContainer: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -7660,6 +7701,7 @@ export declare const ErrorContainer: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -8185,6 +8227,7 @@ export declare const LoadingTextContainer: import("styled-components").StyledCom
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -8227,6 +8270,7 @@ export declare const LoadingTextContainer: import("styled-components").StyledCom
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -8235,6 +8279,7 @@ export declare const LoadingTextContainer: import("styled-components").StyledCom
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Cards/BalanceCard/BalanceCard.styles.js CHANGED Viewed

@@ -76,10 +76,10 @@ exports.CreditContainer = (0, styled_native_1.default)(react_native_1.View)(({ t
     paddingBottom: theme.space[200],
 }));
 exports.StyledDisplay4 = (0, styled_native_1.default)(Display_1.Display4)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d3.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d3.mediaQuery.sm}px`,
 }));
 exports.StyledHeading1 = (0, styled_native_1.default)(Heading_1.Heading1)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d4.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d4.mediaQuery.sm}px`,
 }));
 exports.ErrorContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     flexDirection: 'column',

package/dist/components/Cards/DisruptiveCard/DisruptiveCard.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { IconNameExtended } from '../../../providers';
+export type CardVariant = 'success' | 'info' | 'warning';
+type BaseProps = {
+    heading: string;
+    size?: 'default' | 'small';
+};
+type DisruptiveCardProps = BaseProps & {
+    variant?: CardVariant;
+    subHeading?: string;
+    icon?: IconNameExtended;
+};
+export declare const DisruptiveCard: React.FC<DisruptiveCardProps>;
+export {};

package/dist/components/Cards/DisruptiveCard/DisruptiveCard.js ADDED Viewed

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisruptiveCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("../..");
+const styled_native_1 = require("../../../styled.native");
+const utils_1 = require("../utils");
+const DisruptiveCard_styles_1 = require("./DisruptiveCard.styles");
+const CARD_ICONS = {
+    success: 'check-circle',
+    info: 'info',
+    warning: 'info',
+};
+const getVariantStyles = (variant, theme) => {
+    switch (variant) {
+        case 'success':
+            return {
+                iconTextColor: theme.color.alert.success,
+                background: theme.color.brand.bright,
+            };
+        case 'info':
+            return {
+                iconTextColor: theme.color.alert.info,
+                background: theme.color.alert.infoTint,
+            };
+        case 'warning':
+        default:
+            return {
+                iconTextColor: theme.color.alert.warning,
+                background: theme.color.alert.warningTint,
+            };
+    }
+};
+const DisruptiveHeading = ({ heading, size = 'default', color, }) => {
+    const HeadingComponent = (0, utils_1.checkIsSmall)(size) ? __1.Heading3 : __1.Heading2;
+    const headingStyle = (0, react_1.useMemo)(() => ({ color }), [color]);
+    return (0, jsx_runtime_1.jsx)(HeadingComponent, { style: headingStyle, children: heading });
+};
+const DisruptiveCard = ({ variant = 'success', icon, heading, subHeading, size = 'default', }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const { iconTextColor, background } = getVariantStyles(variant, theme);
+    return ((0, jsx_runtime_1.jsx)(DisruptiveCard_styles_1.CardDisruptive, { background: background, isSmall: true, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { name: icon !== null && icon !== void 0 ? icon : CARD_ICONS[variant], size: 32, color: iconTextColor }), (0, jsx_runtime_1.jsx)(DisruptiveHeading, { color: iconTextColor, heading: heading, size: size }), subHeading && !(0, utils_1.checkIsSmall)(size) && ((0, jsx_runtime_1.jsx)(__1.P, { style: { color: iconTextColor }, children: subHeading }))] }) }));
+};
+exports.DisruptiveCard = DisruptiveCard;