@ovotech/element-native 5.5.0 → 5.7.0

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/OfferCard/OfferCard.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { IconNameExtended } from '../../../providers';
+type Graphic = {
+    type: 'illustration';
+    source: ImageSourcePropType | string;
+} | {
+    type: 'image';
+    source: ImageSourcePropType | string;
+};
+type Props = {
+    badgeText?: string;
+    graphic?: Graphic;
+    eyebrowText?: string;
+    eyebrowIcon?: IconNameExtended;
+    heading: string;
+    subHeading?: string;
+    size?: 'default' | 'small';
+    onPress?: () => void;
+};
+export declare const OfferCard: React.FC<Props>;
+export {};

package/dist/components/Cards/OfferCard/OfferCard.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OfferCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_native_1 = require("../../../styled.native");
+const Icon_1 = require("../../Icon");
+const P_1 = require("../../P");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const OfferCard_styles_1 = require("./OfferCard.styles");
+const GraphicContent = ({ graphic }) => {
+    if (!graphic) {
+        return null;
+    }
+    const resizeMode = graphic.type === 'image' ? 'cover' : 'contain';
+    return ((0, jsx_runtime_1.jsx)(OfferCard_styles_1.CardImage, { source: typeof graphic.source === 'string'
+            ? { uri: graphic.source }
+            : graphic.source, resizeMode: resizeMode }));
+};
+const OfferCard = ({ badgeText, graphic, eyebrowText, eyebrowIcon, heading, subHeading, size = 'default', onPress, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const hasBadge = !!badgeText;
+    const isSmall = (0, utils_1.checkIsSmall)(size);
+    const [cardHeight, setCardHeight] = (0, react_1.useState)(0);
+    const onLayout = (0, react_1.useCallback)((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const CardContent = ((0, jsx_runtime_1.jsxs)(OfferCard_styles_1.CardWithOffer, { isSmall: isSmall, onPress: onPress, onLayout: onLayout, children: [(0, jsx_runtime_1.jsxs)(OfferCard_styles_1.TextContent, { isSmall: isSmall, hasBadge: hasBadge, children: [(eyebrowIcon || eyebrowText) && ((0, jsx_runtime_1.jsxs)(OfferCard_styles_1.EyebrowContainer, { children: [eyebrowIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: eyebrowIcon, color: theme.color.brand.dim })), eyebrowText && (0, jsx_runtime_1.jsx)(OfferCard_styles_1.EyebrowText, { size: "sm", children: eyebrowText })] })), (0, jsx_runtime_1.jsx)(OfferCard_styles_1.HeadingText, { isSmall: isSmall, children: heading }), subHeading && ((0, jsx_runtime_1.jsx)(OfferCard_styles_1.SubHeadingContainer, { children: (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subHeading }) }))] }), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'illustration' && ((0, jsx_runtime_1.jsx)(OfferCard_styles_1.IllustrationContainer, { hasBadge: hasBadge, isSmall: isSmall, children: (0, jsx_runtime_1.jsx)(GraphicContent, { graphic: graphic }) })), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && ((0, jsx_runtime_1.jsx)(OfferCard_styles_1.ImageContainer, { isSmall: isSmall, cardHeight: cardHeight, children: (0, jsx_runtime_1.jsx)(GraphicContent, { graphic: graphic }) }))] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return ((0, jsx_runtime_1.jsx)(components_1.ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};
+exports.OfferCard = OfferCard;

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

@@ -0,0 +1,34 @@
+import { Image, View } from 'react-native';
+export declare const CardWithOffer: 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;
+}, never>;
+export declare const TextContent: 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 EyebrowContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const EyebrowText: 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 HeadingText: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
+    inverted?: boolean;
+    level: import("../../Heading/Heading").HeadingLevel;
+    variant?: "brand" | "surface";
+}, "level">>) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+}, never>;
+export declare const SubHeadingContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const IllustrationContainer: 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 ImageContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isSmall?: boolean;
+    hasBadge?: boolean;
+    cardHeight?: number;
+}, 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/OfferCard/OfferCard.styles.js

@@ -0,0 +1,61 @@
+"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.ImageContainer = exports.IllustrationContainer = exports.SubHeadingContainer = exports.HeadingText = exports.EyebrowText = exports.EyebrowContainer = exports.TextContent = exports.CardWithOffer = void 0;
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const shared_styles_1 = require("../shared.styles");
+exports.CardWithOffer = (0, styled_native_1.default)(shared_styles_1.CardWithMinHeight)(({ isSmall }) => ({
+    padding: 0,
+    display: 'flex',
+    flexDirection: isSmall ? 'column-reverse' : 'row',
+    borderWidth: 0,
+    justifyContent: 'space-between',
+}));
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)(({ isSmall, hasBadge, theme }) => ({
+    flex: isSmall ? undefined : 1,
+    paddingHorizontal: theme.space[400],
+    paddingTop: !isSmall && hasBadge ? theme.space[800] : theme.space[400],
+    paddingBottom: theme.space[400],
+    alignSelf: isSmall ? undefined : 'flex-end',
+}));
+exports.EyebrowContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[50],
+    marginBottom: theme.space[100],
+}));
+exports.EyebrowText = (0, styled_native_1.default)(__1.P)(({ theme }) => ({
+    color: theme.color.brand.dim,
+}));
+exports.HeadingText = (0, styled_native_1.default)(__1.Heading4)(({ isSmall, theme }) => ({
+    color: theme.color.surface.onSurface,
+    fontSize: isSmall ? theme.font.size.md.mediaQuery.sm : undefined,
+    lineHeight: isSmall ? theme.font.lineHeight.md.mediaQuery.sm : undefined,
+}));
+exports.SubHeadingContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    marginTop: theme.space[100],
+}));
+exports.IllustrationContainer = (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',
+    marginBottom: isSmall ? 0 : theme.space[400],
+    marginTop: hasBadge ? theme.space[800] : theme.space[400],
+    marginLeft: isSmall ? theme.space[400] : 0,
+}));
+exports.ImageContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme, isSmall, cardHeight = 0 }) => ({
+    height: isSmall
+        ? theme.space[2400]
+        : cardHeight > 0
+            ? cardHeight
+            : shared_styles_1.SMALL_CARD_HEIGHT,
+    width: !isSmall ? theme.space[3500] : undefined,
+    flexShrink: 0,
+}));
+exports.CardImage = (0, styled_native_1.default)(react_native_1.Image)({
+    width: '100%',
+    height: '100%',
+});

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

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

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