@ovotech/element-native 5.5.0 → 5.7.0

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;

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

@@ -0,0 +1,12 @@
+import { Image, View } from 'react-native';
+export declare const CardWithQuickLink: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, onSelect, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const HeadingText: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const ImageContent: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const Illustration: import("styled-components").StyledComponent<typeof Image, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+}, never>;
+export declare const ImageSkeletonContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSkeletonContainer = exports.Illustration = exports.ImageContent = exports.HeadingText = exports.CardWithQuickLink = void 0;
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const P_1 = require("../../P");
+exports.CardWithQuickLink = (0, styled_native_1.default)(__1.Card)(({ theme }) => ({
+    padding: theme.space[300],
+    minHeight: theme.space[2400],
+    minWidth: theme.space[3500],
+}));
+exports.HeadingText = (0, styled_native_1.default)(P_1.P)(({ theme }) => ({
+    marginBottom: theme.space[900],
+}));
+exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    position: 'absolute',
+    bottom: theme.space[300],
+    right: theme.space[300],
+}));
+exports.Illustration = (0, styled_native_1.default)(react_native_1.Image)(({ isSmall, theme }) => ({
+    width: isSmall ? theme.space[1000] : theme.space[1600],
+    height: isSmall ? theme.space[1000] : theme.space[1600],
+}));
+exports.ImageSkeletonContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    alignSelf: 'flex-end',
+    width: theme.space[1000],
+}));

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

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

package/dist/components/Cards/QuickLinkCard/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("./QuickLinkCard"), exports);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { TitleSegment } from '../types';
+type Props = {
+    badgeText?: string;
+    image: ImageSourcePropType | string;
+    heading: TitleSegment[] | string;
+    subHeading?: string;
+    onPress?: () => void;
+};
+export declare const ServicesImageCard: React.FC<Props>;
+export {};

package/dist/components/Cards/ServicesImageCard/ServicesImageCard.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServicesImageCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const P_1 = require("../../P");
+const components_1 = require("../components");
+const shared_styles_1 = require("../shared.styles");
+const ServicesImageCard_styles_1 = require("./ServicesImageCard.styles");
+const ServicesImageCard = ({ badgeText, image, heading, subHeading, onPress, }) => {
+    const hasBadge = !!badgeText;
+    const [cardHeight, setCardHeight] = (0, react_1.useState)(0);
+    const onLayout = (0, react_1.useCallback)((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const pushImage = (0, react_1.useMemo)(() => cardHeight > shared_styles_1.SMALL_CARD_HEIGHT, [cardHeight]);
+    const content = ((0, jsx_runtime_1.jsxs)(ServicesImageCard_styles_1.CardWithServicesImage, { isSmall: true, onPress: onPress, onLayout: onLayout, children: [(0, jsx_runtime_1.jsxs)(ServicesImageCard_styles_1.TextContent, { hasBadge: hasBadge, pushImage: pushImage, children: [(0, jsx_runtime_1.jsx)(ServicesImageCard_styles_1.HeadingContainer, { subHeading: !!subHeading, children: (0, jsx_runtime_1.jsx)(components_1.ResponsiveHeading, { heading: heading }) }), !!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)(ServicesImageCard_styles_1.ImageContent, { pushImage: pushImage, children: (0, jsx_runtime_1.jsx)(ServicesImageCard_styles_1.CardImage, { pushImage: pushImage, source: typeof image === 'string' ? { uri: image } : image, resizeMode: "cover" }) })] }));
+    if (!hasBadge)
+        return content;
+    return ((0, jsx_runtime_1.jsx)(components_1.ContainerWithCardBadge, { badgeText: badgeText, children: content }));
+};
+exports.ServicesImageCard = ServicesImageCard;

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

@@ -0,0 +1,17 @@
+import { Image, View } from 'react-native';
+export declare const CardWithServicesImage: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, onSelect, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+}, never>;
+export declare const TextContent: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    hasBadge?: boolean;
+    pushImage?: boolean;
+}, never>;
+export declare const HeadingContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    subHeading?: boolean;
+}, never>;
+export declare const ImageContent: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    pushImage?: boolean;
+}, never>;
+export declare const CardImage: import("styled-components").StyledComponent<typeof Image, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    pushImage?: boolean;
+}, never>;

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

@@ -0,0 +1,38 @@
+"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.CardWithServicesImage = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const shared_styles_1 = require("../shared.styles");
+const IMAGE_OUTSIDE = shared_styles_1.SMALL_CARD_HEIGHT * 0.45;
+exports.CardWithServicesImage = (0, styled_native_1.default)(shared_styles_1.CardWithMinHeight)({
+    paddingTop: 0,
+    flexDirection: 'row',
+    borderColor: 'transparent',
+});
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ hasBadge, theme, pushImage }) => ({
+    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
+    paddingRight: pushImage ? IMAGE_OUTSIDE : shared_styles_1.SMALL_CARD_HEIGHT - IMAGE_OUTSIDE,
+    flex: 1,
+    alignSelf: 'flex-end',
+}));
+exports.HeadingContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme, subHeading }) => ({
+    marginBottom: subHeading ? theme.space[200] : 0,
+}));
+exports.ImageContent = (0, styled_native_1.default)(react_native_1.View)(({ theme, pushImage }) => ({
+    position: 'absolute',
+    top: pushImage ? theme.space[50] : theme.space[250],
+    bottom: 0,
+    width: shared_styles_1.SMALL_CARD_HEIGHT,
+    right: -(pushImage ? IMAGE_OUTSIDE * 1.45 : IMAGE_OUTSIDE),
+    transform: 'rotate(-15deg)',
+    overflow: 'hidden',
+}));
+exports.CardImage = (0, styled_native_1.default)(react_native_1.Image)(({ pushImage }) => ({
+    width: '100%',
+    height: '100%',
+    transform: `rotate(15deg) scale(${pushImage ? 1.35 : 1.2})`,
+}));

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

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

package/dist/components/Cards/ServicesImageCard/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("./ServicesImageCard"), exports);

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

@@ -0,0 +1,15 @@
+import { BadgeVariantName } from '../Badge/Badge';
+import { TitleSegment } from './types';
+type ResponsiveHeadingProps = {
+    heading: string | TitleSegment[];
+    size?: 'default' | 'small';
+};
+export declare const ResponsiveHeading: React.FC<ResponsiveHeadingProps>;
+type BadgeProps = {
+    badgeText: string;
+    variant?: BadgeVariantName;
+};
+export declare const ContainerWithCardBadge: React.FC<BadgeProps & {
+    children: React.ReactNode;
+}>;
+export {};

package/dist/components/Cards/components.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerWithCardBadge = exports.ResponsiveHeading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_native_1 = require("../../styled.native");
+const Heading_1 = require("../Heading");
+const shared_styles_1 = require("./shared.styles");
+const utils_1 = require("./utils");
+const ResponsiveHeading = ({ heading, size = 'default', }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const HeadingComponent = (0, utils_1.checkIsSmall)(size) ? Heading_1.Heading4 : Heading_1.Heading2;
+    if (typeof heading === 'string') {
+        return (0, jsx_runtime_1.jsx)(HeadingComponent, { children: heading });
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: heading.map((segment, index) => ((0, jsx_runtime_1.jsx)(HeadingComponent, { style: {
+                color: (0, utils_1.resolveColor)(segment.color),
+                marginRight: theme.space[150],
+            }, children: segment.text }, `${segment.text}-${index}`))) }));
+};
+exports.ResponsiveHeading = ResponsiveHeading;
+const ContainerWithCardBadge = ({ badgeText, variant = 'success', children }) => {
+    return ((0, jsx_runtime_1.jsxs)(shared_styles_1.BadgeContainer, { children: [(0, jsx_runtime_1.jsx)(shared_styles_1.StyledBadge, { variant: variant, children: badgeText }), children] }));
+};
+exports.ContainerWithCardBadge = ContainerWithCardBadge;

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

@@ -1,6 +1,11 @@
 export { AccountCard } from './AccountCard';
 export { BalanceCard, BalanceCardErrorFallback } from './BalanceCard';
+export { DisruptiveCard } from './DisruptiveCard';
+export { HeroImageCard } from './HeroImageCard';
 export { IconDataCard } from './IconDataCard';
 export { IconTextCard } from './IconTextCard';
+export { IllustrationTextCard } from './IllustrationTextCard';
 export { LinkTextCard } from './LinkTextCard';
 export { ProgressBarCard } from './ProgressBarCard';
+export { QuickLinkCard } from './QuickLinkCard';
+export { ServicesImageCard } from './ServicesImageCard';

package/dist/components/Cards/index.js

@@ -1,16 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBarCard = exports.LinkTextCard = exports.IconTextCard = exports.IconDataCard = exports.BalanceCardErrorFallback = exports.BalanceCard = exports.AccountCard = void 0;
+exports.ServicesImageCard = exports.QuickLinkCard = exports.ProgressBarCard = exports.LinkTextCard = exports.IllustrationTextCard = exports.IconTextCard = exports.IconDataCard = exports.HeroImageCard = exports.DisruptiveCard = exports.BalanceCardErrorFallback = exports.BalanceCard = exports.AccountCard = void 0;
 var AccountCard_1 = require("./AccountCard");
 Object.defineProperty(exports, "AccountCard", { enumerable: true, get: function () { return AccountCard_1.AccountCard; } });
 var BalanceCard_1 = require("./BalanceCard");
 Object.defineProperty(exports, "BalanceCard", { enumerable: true, get: function () { return BalanceCard_1.BalanceCard; } });
 Object.defineProperty(exports, "BalanceCardErrorFallback", { enumerable: true, get: function () { return BalanceCard_1.BalanceCardErrorFallback; } });
+var DisruptiveCard_1 = require("./DisruptiveCard");
+Object.defineProperty(exports, "DisruptiveCard", { enumerable: true, get: function () { return DisruptiveCard_1.DisruptiveCard; } });
+var HeroImageCard_1 = require("./HeroImageCard");
+Object.defineProperty(exports, "HeroImageCard", { enumerable: true, get: function () { return HeroImageCard_1.HeroImageCard; } });
 var IconDataCard_1 = require("./IconDataCard");
 Object.defineProperty(exports, "IconDataCard", { enumerable: true, get: function () { return IconDataCard_1.IconDataCard; } });
 var IconTextCard_1 = require("./IconTextCard");
 Object.defineProperty(exports, "IconTextCard", { enumerable: true, get: function () { return IconTextCard_1.IconTextCard; } });
+var IllustrationTextCard_1 = require("./IllustrationTextCard");
+Object.defineProperty(exports, "IllustrationTextCard", { enumerable: true, get: function () { return IllustrationTextCard_1.IllustrationTextCard; } });
 var LinkTextCard_1 = require("./LinkTextCard");
 Object.defineProperty(exports, "LinkTextCard", { enumerable: true, get: function () { return LinkTextCard_1.LinkTextCard; } });
 var ProgressBarCard_1 = require("./ProgressBarCard");
 Object.defineProperty(exports, "ProgressBarCard", { enumerable: true, get: function () { return ProgressBarCard_1.ProgressBarCard; } });
+var QuickLinkCard_1 = require("./QuickLinkCard");
+Object.defineProperty(exports, "QuickLinkCard", { enumerable: true, get: function () { return QuickLinkCard_1.QuickLinkCard; } });
+var ServicesImageCard_1 = require("./ServicesImageCard");
+Object.defineProperty(exports, "ServicesImageCard", { enumerable: true, get: function () { return ServicesImageCard_1.ServicesImageCard; } });