@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

package/dist/theme/create-theme.js

@@ -210,6 +210,73 @@ function createTheme(customTheme, additional) {
             borderColor: colors.borderMuted,
             padding: [space[3], space[6], space[9]],
         },
+        badge: {
+            fontFamily: fonts.bold,
+            lineHeight: lineHeights.standard,
+            paddingHorizontal: space[2],
+            borderRadius: radii.small,
+            fontSize: responsiveFontSizes.body,
+            variants: {
+                default: {
+                    background: colors.primaryMuted,
+                    foreground: colors.primaryAlt,
+                },
+                error: {
+                    background: colors.errorMuted,
+                    foreground: colors.errorAlt,
+                },
+                success: {
+                    background: colors.successMuted,
+                    foreground: colors.successAlt,
+                },
+                info: {
+                    background: colors.infoMuted,
+                    foreground: colors.infoAlt,
+                },
+                warning: {
+                    background: colors.warningMuted,
+                    foreground: colors.warningAlt,
+                },
+            },
+        },
+        cta: {
+            fontSize: responsiveFontSizes.body,
+            fontFamily: fonts.bold,
+            lineHeight: lineHeights.standard,
+            paddingVertical: space[2],
+            paddingHorizontal: space[3],
+            borderRadius: radii.small,
+            borderWidth: borderWidths.standard,
+            iconGap: space[1],
+            minHeight: space[11],
+            variants: {
+                primary: {
+                    background: colors.primary,
+                    foreground: colors.primaryContrast,
+                    border: colors.primary,
+                },
+                secondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
+                destructive: {
+                    background: colors.error,
+                    foreground: colors.errorContrast,
+                    border: colors.error,
+                },
+                missionPrimary: {
+                    background: colors.mission,
+                    foreground: colors.missionContrast,
+                    border: colors.mission,
+                },
+                missionSecondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
+            },
+        },
         checkbox: {
             touchSize: space[11],
             size: space[6],
@@ -224,6 +291,41 @@ function createTheme(customTheme, additional) {
             checkColor: colors.info,
             errorColor: colors.error,
         },
+        notification: {
+            borderRadius: radii.small,
+            borderWidth: borderWidths.heavy,
+            borderColor: colors.error,
+            background: colors.errorMuted,
+            paddingX: [space[2], space[2]],
+            paddingY: [space[3], space[6]],
+            dismiss: {
+                touchSize: space[6],
+                size: space[4],
+                icon: 'cross',
+            },
+            variants: {
+                error: {
+                    borderColor: colors.errorMuted,
+                    background: colors.errorMuted,
+                    textColor: colors.errorAlt,
+                },
+                success: {
+                    borderColor: colors.successMuted,
+                    background: colors.successMuted,
+                    textColor: colors.successAlt,
+                },
+                info: {
+                    borderColor: colors.infoMuted,
+                    background: colors.infoMuted,
+                    textColor: colors.infoAlt,
+                },
+                warning: {
+                    borderColor: colors.warningMuted,
+                    background: colors.warningMuted,
+                    textColor: colors.warningAlt,
+                },
+            },
+        },
         text: {
             fontFamily: fonts.body,
             lineHeight: 1,
@@ -324,6 +426,33 @@ function createTheme(customTheme, additional) {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
         },
+        dataTable: {
+            borderWidth: borderWidths.standard,
+            borderRadius: radii.small,
+            borderColor: colors.canvasMuted,
+            responsivePadding: {
+                vertical: [space[2], space[3]],
+                horizontal: [space[1], space[1]],
+            },
+            tableHeader: {
+                color: colors.heading,
+                backgroundColor: colors.canvas,
+                borderWidth: borderWidths.standard,
+                borderColor: colors.border,
+                fontFamily: fonts.bold,
+            },
+            tableCaption: {
+                color: colors.heading,
+                fontFamily: fonts.bold,
+            },
+            tableCell: {
+                color: colors.body,
+            },
+            tableRow: {
+                backgroundColor: colors.canvas,
+                stripeColor: colors.canvasMuted,
+            },
+        },
         accordion: {
             header: {
                 color: colors.primary,
@@ -332,6 +461,30 @@ function createTheme(customTheme, additional) {
                 iconGap: space[3],
             },
         },
+        tabs: {
+            tab: {
+                borderTopWidth: borderWidths.heavy,
+                borderBottomWidth: borderWidths.heavy,
+                borderColor: colors.canvas,
+                fontSize: responsiveFontSizes.body,
+                fontFamily: fonts.bold,
+                lineHeight: lineHeights.standard,
+                paddingHorizontal: [space[4], space[4]],
+                paddingVertical: [space[3], space[3]],
+                active: {
+                    borderColor: colors.primary,
+                    foregroundColor: colors.primary,
+                    backgroundColor: colors.canvas,
+                },
+                inactive: {
+                    foregroundColor: colors.heading,
+                    backgroundColor: colors.canvas,
+                },
+                hover: {
+                    foregroundColor: colors.primaryAlt,
+                },
+            },
+        },
     }, theme, mergeOptions);
 }
 exports.createTheme = createTheme;

package/dist/theme/index.d.ts

@@ -5,10 +5,10 @@ export declare const theme: import("./theme").Theme & {
         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>;
+        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 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", {
+        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
+        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
             lightest: string;
             lighter: string;
             light: string;
@@ -24,53 +24,71 @@ export declare const theme: import("./theme").Theme & {
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             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> & {
+        focus: Record<"outline" | "surface", string>;
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         warning: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         error: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
         info: {
             border: string;
             surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        electricity: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
+        };
+        gas: {
+            border: string;
+            surface: string;
+            message: {
+                base: string;
+                secondary: string;
+            };
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -201,30 +219,6 @@ export declare const theme: import("./theme").Theme & {
                 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;
-                };
-            };
-        };
     };
 };
 export declare type Theme = typeof theme;

package/dist/theme/theme.d.ts

@@ -1,3 +1,7 @@
+import { BadgeVariantName, BadgeVariant } from '../components/Badge/Badge';
+import { CTAVariantName, CTAVariant } from '../components/CTAButton/CTAButton';
+import { NotificationVariant, NotificationVariantName } from '../components/Notification/Notification';
+import { IconName } from '../providers';
 declare type Shadow = {
     color: string;
     offset: string;
@@ -20,6 +24,26 @@ export declare type Theme = {
     radii: Record<'small' | 'medium' | 'large', string>;
     shadows: Record<'standard', Shadow>;
     borderWidths: Record<'standard' | 'heavy' | 'heavier', string>;
+    badge: {
+        fontFamily: string;
+        lineHeight: number;
+        paddingHorizontal: string;
+        borderRadius: string;
+        fontSize: string[];
+        variants: Record<BadgeVariantName, BadgeVariant>;
+    };
+    cta: {
+        fontSize: string[];
+        fontFamily: string;
+        lineHeight: number;
+        paddingVertical: string;
+        paddingHorizontal: string;
+        borderRadius: number | string;
+        borderWidth: string;
+        iconGap: string;
+        minHeight: string;
+        variants: Record<CTAVariantName, CTAVariant>;
+    };
     text: {
         fontFamily: string;
         lineHeight: number;
@@ -88,6 +112,21 @@ export declare type Theme = {
             marginBottom: string[];
         };
     };
+    notification: {
+        borderRadius: string;
+        borderWidth: string;
+        borderColor: string;
+        background: string;
+        paddingX: string[];
+        paddingY: string[];
+        variants: Record<NotificationVariantName, NotificationVariant>;
+        dismiss: {
+            icon: IconName;
+            size: string;
+            color: string;
+            touchSize: string;
+        };
+    };
     radio: {
         touchSize: string;
         size: string;
@@ -181,6 +220,33 @@ export declare type Theme = {
         maxWidth: string;
         gutter: string[];
     };
+    dataTable: {
+        borderWidth: string;
+        borderRadius: string;
+        borderColor: string;
+        responsivePadding: {
+            vertical: [string, string];
+            horizontal: [string, string];
+        };
+        tableHeader: {
+            color: string;
+            backgroundColor: string;
+            borderWidth: string;
+            borderColor: string;
+            fontFamily: string;
+        };
+        tableCaption: {
+            color: string;
+            fontFamily: string;
+        };
+        tableCell: {
+            color: string;
+        };
+        tableRow: {
+            backgroundColor: string;
+            stripeColor: string;
+        };
+    };
     accordion: {
         header: {
             color: string;
@@ -189,5 +255,29 @@ export declare type Theme = {
             paddingVertical: string[];
         };
     };
+    tabs: {
+        tab: {
+            fontSize: string[];
+            fontFamily: string;
+            lineHeight: number;
+            borderTopWidth: string;
+            borderBottomWidth: string;
+            borderColor: string;
+            paddingVertical: string[];
+            paddingHorizontal: string[];
+            active: {
+                backgroundColor: string;
+                foregroundColor: string;
+                borderColor: string;
+            };
+            inactive: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            hover: {
+                foregroundColor: string;
+            };
+        };
+    };
 };
 export {};

package/dist/utils/utils.d.ts

@@ -1,16 +1,15 @@
-import { Ref, ReactNode, ReactElement, ComponentType } from 'react';
+import React, { Ref, ReactNode, ComponentType } from 'react';
 import { ViewProps, View } from 'react-native';
 import { BreakpointNames, Breakpoints } from '../hooks';
 declare function mergeRefs<T>(ref1: undefined | Ref<T>, ref2: undefined | Ref<T>): (element: T) => void;
 declare function getText(children: ReactNode): string;
 declare function pxToNumber(px: string): number;
-declare function numToPx(num: number): string;
-declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Omit<T, BreakpointNames>> & import("react").RefAttributes<C>>;
+declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, BreakpointNames>> & React.RefAttributes<C>>;
 declare function responsiveStyle(property: string, value: any, breakpoints: Breakpoints, formatter?: (v: any) => string): any;
 declare function getErrorMessage(id: string, errors: Array<{
     id: string;
     message: ReactNode;
 }>): null | ReactNode;
 declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
-declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
-export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, numToPx, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };
+declare function filterChildrenByType(children: ReactNode, type: ComponentType): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };

package/dist/utils/utils.js

@@ -10,10 +10,32 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.numToPx = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../hooks");
 function mergeRefs(ref1, ref2) {
     return function (element) {
@@ -47,15 +69,11 @@ function pxToNumber(px) {
     return parseFloat(px);
 }
 exports.pxToNumber = pxToNumber;
-function numToPx(num) {
-    return "".concat(num, "px");
-}
-exports.numToPx = numToPx;
 function styledComponentWithBreakpoints(Component) {
     return (0, react_1.forwardRef)(function (props, ref) {
         var breakpoints = (0, hooks_1.useBreakpoint)();
         // @ts-ignore.
-        return (0, jsx_runtime_1.jsx)(Component, __assign({}, props, breakpoints, { ref: ref }));
+        return react_1.default.createElement(Component, __assign({}, props, breakpoints, { ref: ref }));
     });
 }
 exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "2.2.0-canary-668a0ee-91",
+  "version": "2.2.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,8 +13,7 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^1.1.0-canary-668a0ee-91",
-    "deepmerge": "^4.2.2"
+    "@ovotech/element-core": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
@@ -33,10 +32,10 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
-    "metro-react-native-babel-preset": "^0.77.0",
+    "metro-react-native-babel-preset": "^0.76.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",
-    "react-native": "0.72.3",
+    "react-native": "0.71.8",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
@@ -48,7 +47,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0",
-    "react-native": "^0.63.3 || ^0.71.0 || ^0.72.0",
+    "react-native": "^0.63.3 || ^0.71.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "^13.5.0",
     "styled-components": "^5.1.3"

package/dist/components/DataTable/TableRow.d.ts

@@ -1,2 +0,0 @@
-import { TableRowProps } from './types';
-export declare const TableRow: ({ data, index, striped, rowHeadings, columnWidths, }: TableRowProps) => JSX.Element;

package/dist/components/DataTable/TableRow.js

@@ -1,31 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableRow = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_is_1 = require("react-is");
-var hooks_1 = require("../../hooks");
-var styles_1 = require("./styles");
-var TableRow = function (_a) {
-    var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    var cells = data.map(function (cellData, i) {
-        if (rowHeadings && i === 0) {
-            return ((0, react_1.createElement)(styles_1.RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
-        }
-        return ((0, react_1.createElement)(styles_1.TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.CellText, __assign({}, breakpoints, { children: cellData })))));
-    });
-    return ((0, jsx_runtime_1.jsx)(styles_1.TableRow, __assign({ stripe: striped && index % 2 === 0 }, { children: cells })));
-};
-exports.TableRow = TableRow;