@ovotech/element-native 5.5.0 → 5.7.0

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubHeading = exports.TitleContainer = exports.TextContainer = exports.CardWithIconText = void 0;
+exports.SubHeading = exports.TextContainer = exports.CardWithIconText = void 0;
 const react_native_1 = require("react-native");
 const styled_native_1 = __importDefault(require("../../../styled.native"));
 const shared_styles_1 = require("../shared.styles");
@@ -14,11 +14,6 @@ exports.TextContainer = (0, styled_native_1.default)(react_native_1.View)(({ isS
     flex: isSmall ? 1 : undefined,
     justifyContent: 'flex-end',
 }));
-exports.TitleContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
-    marginRight: theme.space[50],
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-}));
 exports.SubHeading = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     marginTop: theme.space[200],
 }));

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { TitleSegment } from '../types';
+type Props = {
+    badgeText?: string;
+    illustration: ImageSourcePropType | string;
+    heading: TitleSegment[] | string;
+    subHeading?: string;
+    size?: 'default' | 'small';
+    backgroundColor?: 'default' | 'brand';
+    onPress: () => void;
+};
+export declare const IllustrationTextCard: React.FC<Props>;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IllustrationTextCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const styled_native_1 = require("../../../styled.native");
+const P_1 = require("../../P");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const IllustrationTextCard_styles_1 = require("./IllustrationTextCard.styles");
+const IllustrationTextCard = ({ badgeText, illustration, heading, subHeading, size = 'default', backgroundColor, onPress, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const hasBadge = !!badgeText;
+    const CardContent = ((0, jsx_runtime_1.jsxs)(IllustrationTextCard_styles_1.CardWithIllustrationText, { isSmall: (0, utils_1.checkIsSmall)(size), hasBadge: hasBadge, onPress: onPress, background: backgroundColor
+            ? backgroundColor === 'brand'
+                ? theme.color.brand.accessible
+                : undefined
+            : undefined, children: [(0, jsx_runtime_1.jsxs)(IllustrationTextCard_styles_1.TextContent, { isSmall: (0, utils_1.checkIsSmall)(size), children: [(0, jsx_runtime_1.jsx)(IllustrationTextCard_styles_1.HeadingContainer, { isSmall: (0, utils_1.checkIsSmall)(size), children: (0, jsx_runtime_1.jsx)(components_1.ResponsiveHeading, { heading: heading, size: size }) }), !(0, utils_1.checkIsSmall)(size) && subHeading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(P_1.P, { inverted: backgroundColor === 'brand', children: subHeading }) }))] }), (0, jsx_runtime_1.jsx)(IllustrationTextCard_styles_1.ImageContent, { hasBadge: hasBadge, isSmall: (0, utils_1.checkIsSmall)(size), children: (0, jsx_runtime_1.jsx)(IllustrationTextCard_styles_1.CardImage, { source: typeof illustration === 'string'
+                        ? { uri: illustration }
+                        : illustration, resizeMode: "contain" }) })] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return ((0, jsx_runtime_1.jsx)(components_1.ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};
+exports.IllustrationTextCard = IllustrationTextCard;

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

@@ -0,0 +1,18 @@
+import { Image, View } from 'react-native';
+export declare const CardWithIllustrationText: 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;
+} & {
+    isSmall?: boolean;
+    hasBadge?: boolean;
+}, never>;
+export declare const TextContent: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+}, never>;
+export declare const HeadingContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+}, never>;
+export declare const ImageContent: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+    hasBadge?: boolean;
+}, never>;
+export declare const CardImage: import("styled-components").StyledComponent<typeof Image, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

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

@@ -0,0 +1,33 @@
+"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',
+    justifyContent: 'space-between',
+}));
+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],
+    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;