@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/Cards/IllustrationTextCard/IllustrationTextCard.styles.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardImage = exports.ImageContent = exports.HeadingContainer = exports.TextContent = exports.CardWithIllustrationText = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const shared_styles_1 = require("../shared.styles");
+exports.CardWithIllustrationText = (0, styled_native_1.default)(shared_styles_1.CardWithMinHeight)(({ theme, isSmall, hasBadge }) => ({
+    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
+    display: 'flex',
+    flexDirection: isSmall ? 'column-reverse' : 'row',
+}));
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, theme }) => ({
+    flex: isSmall ? undefined : 1,
+    paddingRight: isSmall ? 0 : theme.space[100],
+    alignSelf: isSmall ? undefined : 'flex-end',
+}));
+exports.HeadingContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme, isSmall }) => ({
+    marginBottom: isSmall ? 0 : theme.space[200],
+}));
+exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[3000],
+    height: isSmall ? theme.space[1600] : theme.space[3000],
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: isSmall ? undefined : 'center',
+    marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
+}));
+exports.CardImage = (0, styled_native_1.default)(react_native_1.Image)({
+    width: '100%',
+    height: '100%',
+});

package/dist/components/Cards/IllustrationTextCard/index.d.ts

@@ -0,0 +1 @@
+export * from './IllustrationTextCard';

package/dist/components/Cards/IllustrationTextCard/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IllustrationTextCard"), exports);

package/dist/components/Cards/LinkTextCard/LinkTextCard.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { ImageSourcePropType } from 'react-native';
 type Props = {
     image?: ImageSourcePropType;
-    badge?: string;
+    badgeText?: string;
     heading: string;
     subHeading?: string;
     size?: 'default' | 'small';
-    onPress?: () => void;
+    onPress: () => void;
 };
 export declare const LinkTextCard: React.FC<Props>;
 export {};

package/dist/components/Cards/LinkTextCard/LinkTextCard.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkTextCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const __1 = require("../..");
-const shared_styles_1 = require("../shared.styles");
+const P_1 = require("../../P");
+const Strong_1 = require("../../Strong");
+const components_1 = require("../components");
 const utils_1 = require("../utils");
 const LinkTextCard_styles_1 = require("./LinkTextCard.styles");
-const LinkTextCard = ({ image, badge, heading, subHeading, size, onPress, }) => {
-    const hasBadge = !!badge;
-    const CardContent = ((0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.CardWithLinkText, { isSmall: (0, utils_1.checkIsSmall)(size), hasBadge: hasBadge, onPress: onPress, children: [(0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.TextContent, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.Heading, { isSmall: (0, utils_1.checkIsSmall)(size), children: (0, jsx_runtime_1.jsx)(__1.Strong, { children: heading }) }) }), !(0, utils_1.checkIsSmall)(size) && ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(__1.P, { children: subHeading }) }))] }), (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.ImageContent, { children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.CardImage, { source: image
+const LinkTextCard = ({ image, badgeText, heading, subHeading, size, onPress, }) => {
+    const hasBadge = !!badgeText;
+    const CardContent = ((0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.CardWithLinkText, { isSmall: (0, utils_1.checkIsSmall)(size), hasBadge: hasBadge, onPress: onPress, children: [(0, jsx_runtime_1.jsxs)(LinkTextCard_styles_1.TextContent, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.Heading, { isSmall: (0, utils_1.checkIsSmall)(size), children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: heading }) }) }), !(0, utils_1.checkIsSmall)(size) && !!subHeading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: subHeading }) }))] }), (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.ImageContent, { isSmall: (0, utils_1.checkIsSmall)(size), hasBadge: hasBadge, children: (0, jsx_runtime_1.jsx)(LinkTextCard_styles_1.CardImage, { source: image
                         ? image
                         : {
                             uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
@@ -17,6 +18,6 @@ const LinkTextCard = ({ image, badge, heading, subHeading, size, onPress, }) =>
     if (!hasBadge) {
         return CardContent;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(shared_styles_1.CardBadge, { variant: "success", children: badge }), CardContent] }));
+    return ((0, jsx_runtime_1.jsx)(components_1.ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
 };
 exports.LinkTextCard = LinkTextCard;

package/dist/components/Cards/LinkTextCard/LinkTextCard.styles.d.ts

@@ -1,5 +1,5 @@
 import { Image, View } from 'react-native';
-export declare const CardWithLinkText: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, {
+export declare const CardWithLinkText: 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 CardWithLinkText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const CardWithLinkText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const CardWithLinkText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -616,6 +619,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -658,6 +662,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -666,6 +671,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1193,6 +1199,7 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1235,6 +1242,7 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1243,6 +1251,7 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1728,7 +1737,10 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
             selectedTint: string;
         };
     };
-}, {}, never>;
+}, {
+    isSmall?: boolean;
+    hasBadge?: boolean;
+}, never>;
 export declare const CardImage: import("styled-components").StyledComponent<typeof Image, {
     color: {
         neutral: {
@@ -1768,6 +1780,7 @@ export declare const CardImage: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1810,6 +1823,7 @@ export declare const CardImage: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1818,6 +1832,7 @@ export declare const CardImage: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2347,6 +2362,7 @@ export declare const Heading: import("styled-components").StyledComponent<(props
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2389,6 +2405,7 @@ export declare const Heading: import("styled-components").StyledComponent<(props
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2397,6 +2414,7 @@ export declare const Heading: import("styled-components").StyledComponent<(props
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Cards/LinkTextCard/LinkTextCard.styles.js

@@ -13,16 +13,19 @@ exports.CardWithLinkText = (0, styled_native_1.default)(Card_1.Card)(({ theme, i
     display: 'flex',
     flexDirection: isSmall ? 'column-reverse' : 'row',
 }));
-exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ isSmall }) => ({
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, theme }) => ({
     flex: isSmall ? undefined : 1,
-    paddingRight: isSmall ? 0 : 5,
+    paddingRight: isSmall ? 0 : theme.space[100],
+    alignSelf: isSmall ? undefined : 'flex-end',
 }));
-exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)({
-    width: 80,
-    height: 80,
+exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[2000],
+    height: isSmall ? theme.space[1600] : theme.space[2000],
     justifyContent: 'center',
     alignItems: 'center',
-});
+    alignSelf: isSmall ? undefined : 'center',
+    marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
+}));
 exports.CardImage = (0, styled_native_1.default)(react_native_1.Image)({
     width: '100%',
     height: '100%',

package/dist/components/Cards/ProgressBarCard/ProgressBarCard.styles.d.ts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-export declare const CardWithProgressBar: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, {
+export declare const CardWithProgressBar: 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 CardWithProgressBar: import("styled-components").StyledComp
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const CardWithProgressBar: import("styled-components").StyledComp
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const CardWithProgressBar: import("styled-components").StyledComp
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -615,6 +618,7 @@ export declare const MarkerContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -657,6 +661,7 @@ export declare const MarkerContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -665,6 +670,7 @@ export declare const MarkerContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1190,6 +1196,7 @@ export declare const ValueWrapper: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1232,6 +1239,7 @@ export declare const ValueWrapper: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1240,6 +1248,7 @@ export declare const ValueWrapper: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1768,6 +1777,7 @@ export declare const ValueTextContainer: import("styled-components").StyledCompo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1810,6 +1820,7 @@ export declare const ValueTextContainer: import("styled-components").StyledCompo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1818,6 +1829,7 @@ export declare const ValueTextContainer: import("styled-components").StyledCompo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2343,6 +2355,7 @@ export declare const ProgressBarWrapper: import("styled-components").StyledCompo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2385,6 +2398,7 @@ export declare const ProgressBarWrapper: import("styled-components").StyledCompo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2393,6 +2407,7 @@ export declare const ProgressBarWrapper: import("styled-components").StyledCompo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2918,6 +2933,7 @@ export declare const ProgressBarContainer: import("styled-components").StyledCom
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2960,6 +2976,7 @@ export declare const ProgressBarContainer: import("styled-components").StyledCom
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2968,6 +2985,7 @@ export declare const ProgressBarContainer: import("styled-components").StyledCom
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3493,6 +3511,7 @@ export declare const EPCBarMarkerLayer: import("styled-components").StyledCompon
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3535,6 +3554,7 @@ export declare const EPCBarMarkerLayer: import("styled-components").StyledCompon
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3543,6 +3563,7 @@ export declare const EPCBarMarkerLayer: import("styled-components").StyledCompon
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4068,6 +4089,7 @@ export declare const EPCBarSegment: import("styled-components").StyledComponent<
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4110,6 +4132,7 @@ export declare const EPCBarSegment: import("styled-components").StyledComponent<
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4118,6 +4141,7 @@ export declare const EPCBarSegment: import("styled-components").StyledComponent<
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4643,6 +4667,7 @@ export declare const ValueBarRemainder: import("styled-components").StyledCompon
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4685,6 +4710,7 @@ export declare const ValueBarRemainder: import("styled-components").StyledCompon
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4693,6 +4719,7 @@ export declare const ValueBarRemainder: import("styled-components").StyledCompon
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Cards/QuickLinkCard/QuickLinkCard.d.ts

@@ -0,0 +1,12 @@
+import { ImageSourcePropType } from 'react-native';
+import { CardProps } from '../../Card/Card';
+type SizeProp = 'default' | 'small';
+type Props = CardProps & {
+    heading: string;
+    illustration?: ImageSourcePropType | string;
+    onPress: () => void;
+    size?: SizeProp;
+    loading?: boolean;
+};
+export declare const QuickLinkCard: React.FC<Props>;
+export {};

package/dist/components/Cards/QuickLinkCard/QuickLinkCard.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickLinkCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const utils_1 = require("../utils");
+const QuickLinkCard_styles_1 = require("./QuickLinkCard.styles");
+const QuickLinkCard = (_a) => {
+    var { heading, illustration, onPress, size = 'default', loading = false } = _a, rest = __rest(_a, ["heading", "illustration", "onPress", "size", "loading"]);
+    const showContent = !loading;
+    return ((0, jsx_runtime_1.jsxs)(QuickLinkCard_styles_1.CardWithQuickLink, Object.assign({ onPress: onPress }, rest, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [loading && (0, jsx_runtime_1.jsx)(__1.SkeletonText, { lines: 2 }), showContent && ((0, jsx_runtime_1.jsx)(QuickLinkCard_styles_1.HeadingText, { children: (0, jsx_runtime_1.jsx)(__1.Strong, { children: heading }) }))] }), loading && ((0, jsx_runtime_1.jsx)(QuickLinkCard_styles_1.ImageSkeletonContainer, { children: (0, jsx_runtime_1.jsx)(__1.SkeletonCircle, {}) })), showContent && illustration && ((0, jsx_runtime_1.jsx)(QuickLinkCard_styles_1.ImageContent, { children: (0, jsx_runtime_1.jsx)(QuickLinkCard_styles_1.Illustration, { isSmall: (0, utils_1.checkIsSmall)(size), source: typeof illustration === 'string'
+                        ? { uri: illustration }
+                        : illustration, resizeMode: "contain" }) }))] })));
+};
+exports.QuickLinkCard = QuickLinkCard;