@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/components/SkeletonLoading/Skeleton.d.ts

@@ -1 +1,228 @@
-export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, {}, never>;
+export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+    core: {
+        radius: Record<"small" | "medium" | "large" | "max", string>;
+        borderWidth: Record<"small" | "medium" | "large", string>;
+        breakpoint: Record<"small" | "medium" | "large", string | number>;
+        mediaQuery: Record<"small" | "medium" | "large", string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        transition: Record<"medium" | "slow" | "fast", string>;
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+            lightest: string;
+            lighter: string;
+            light: string;
+            base: string;
+            dark: string;
+            darker: string;
+            darkest: string;
+        }> & {
+            brand: Record<string, string>;
+        };
+        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+            native: string;
+            web: string;
+        }>;
+        fontWeight: Record<"bold" | "book" | "black", string | number>;
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+    };
+    semantic: {
+        surface: Record<"base" | "cutout" | "elevated", string>;
+        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        border: Record<"graphic" | "differentiated" | "functional", string>;
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", string> & {
+            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        };
+        success: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        warning: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        error: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        info: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+    };
+    component: {
+        heading1: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+        };
+        badge: {
+            variants: {
+                red: {
+                    foreground: string;
+                    background: string;
+                };
+                orange: {
+                    foreground: string;
+                    background: string;
+                };
+                yellow: {
+                    foreground: string;
+                    background: string;
+                };
+                green: {
+                    foreground: string;
+                    background: string;
+                };
+                blue: {
+                    foreground: string;
+                    background: string;
+                };
+            };
+        };
+    };
+}, {}, never>;

package/dist/components/SkeletonLoading/SkeletonAnimation.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const SkeletonAnimation: ({ children, animation, testID, }: {
+    children: ReactNode;
+    animation?: "none" | "pulse" | undefined;
+    testID?: string | undefined;
+}) => JSX.Element;

package/dist/components/SkeletonLoading/SkeletonAnimation.js

@@ -0,0 +1,57 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonAnimation = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = (0, react_1.useRef)(new react_native_1.Animated.Value(0));
+    var animationLoop = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        animationLoop.current = react_native_1.Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!react_native_1.Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        react_native_1.Animated.loop(animationLoop.current).start();
+    }, []);
+    return (react_1.default.createElement(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (react_1.default.createElement(react_native_1.Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (react_1.default.createElement(react_native_1.View, null, children))));
+};
+exports.SkeletonAnimation = SkeletonAnimation;

package/dist/components/SkeletonLoading/SkeletonCTA.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest))));
 };
 exports.SkeletonCTA = SkeletonCTA;

package/dist/components/SkeletonLoading/SkeletonCircle.js

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
@@ -40,7 +41,8 @@ var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(fun
 });
 var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        react_1.default.createElement(StyledSkeletonCircle, { size: size })));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            react_1.default.createElement(StyledSkeletonCircle, { size: size }))));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonLoading/SkeletonHeading.js

@@ -30,12 +30,14 @@ var react_1 = __importDefault(require("react"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var Heading_1 = require("../Heading");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (react_1.default.createElement(SkeletonAnimation_1.SkeletonAnimation, null,
+        react_1.default.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonLoading/SkeletonText.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
 var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Text_1 = require("../Text");
 var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
 var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat((0, utils_1.responsiveStyle)('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -44,6 +44,6 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(react_1.default.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (react_1.default.createElement(Text_1.P, __assign({ as: react_native_1.View }, rest), generatedLines));
+    return (react_1.default.createElement(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest), generatedLines));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -5,7 +5,234 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: import("../../theme/theme").Theme | undefined;
+    theme?: (import("../../theme/theme").Theme & {
+        core: {
+            radius: Record<"small" | "medium" | "large" | "max", string>;
+            borderWidth: Record<"small" | "medium" | "large", string>;
+            breakpoint: Record<"small" | "medium" | "large", string | number>;
+            mediaQuery: Record<"small" | "medium" | "large", string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+            transition: Record<"medium" | "slow" | "fast", string>;
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+                lightest: string;
+                lighter: string;
+                light: string;
+                base: string;
+                dark: string;
+                darker: string;
+                darkest: string;
+            }> & {
+                brand: Record<string, string>;
+            };
+            fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+                native: string;
+                web: string;
+            }>;
+            fontWeight: Record<"bold" | "book" | "black", string | number>;
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+                small: string | number;
+                large: string | number;
+            }>;
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+                small: string | number;
+                large: string | number;
+            }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        };
+        semantic: {
+            surface: Record<"base" | "cutout" | "elevated", string>;
+            message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+            border: Record<"graphic" | "differentiated" | "functional", string>;
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
+                message: Record<"base" | "link" | "secondary" | "branded", string>;
+            };
+            success: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            warning: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            error: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            info: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        };
+        component: {
+            heading1: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading2: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading3: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading4: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            lead: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            body: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            small: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            label: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            cta: {
+                primary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                secondary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                destructive: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+            };
+            badge: {
+                variants: {
+                    red: {
+                        foreground: string;
+                        background: string;
+                    };
+                    orange: {
+                        foreground: string;
+                        background: string;
+                    };
+                    yellow: {
+                        foreground: string;
+                        background: string;
+                    };
+                    green: {
+                        foreground: string;
+                        background: string;
+                    };
+                    blue: {
+                        foreground: string;
+                        background: string;
+                    };
+                };
+            };
+        };
+    }) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/SubLabelText/SubLabelText.js

@@ -34,7 +34,7 @@ var utils_1 = require("../../utils");
 var StyledSubLabelText = styled_native_1.default.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.subLabel.fontWeight, field.subLabel.color, fontSize);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.subLabel.color, fontSize);
 });
 var SubLabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledSubLabelText);
 exports.SubLabelText = SubLabelText;

package/dist/components/SummaryList/SummaryList.d.ts

@@ -1,6 +1,10 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Dd, Dl } from '../List';
 declare type SummaryListProps = ComponentProps<typeof Dl>;
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
 declare const SummaryList: ({ children, ...rest }: SummaryListProps) => JSX.Element;
 declare type SummaryItemProps = ComponentProps<typeof Dd> & {
     label: ReactNode;

package/dist/components/SummaryList/SummaryList.js

@@ -48,8 +48,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SummaryItem = exports.SummaryList = void 0;
 var react_1 = __importStar(require("react"));
 var List_1 = require("../List");
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the Description List (List/Dl) component instead.
+ * */
 var SummaryList = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
+    console.warn('SummaryList component has been deprecated and will be removed in a future release. Please use the DescriptionList component instead.');
     return (react_1.default.createElement(List_1.Dl, __assign({}, rest), react_1.Children.map(children, function (child, index) {
         return (0, react_1.cloneElement)(child, {
             index: index,