@ovotech/element-native 3.3.1 → 3.3.2-canary-51af19f-615

package/dist/esm/theme/create-theme.js

@@ -0,0 +1,330 @@
+import deepMerge from 'deepmerge';
+var brand = {
+    focus: { base: '#3F64E6' },
+    primary: {
+        muted: '#E7F3EA',
+        lightest: '#B6D727',
+        lighter: '#9DC431',
+        light: '#6CBD27',
+        base: '#0D8426',
+        dark: '#0D8426',
+        darker: '#006945',
+    },
+    grey: {
+        lightest: '#FFFFFF',
+        lighter: '#F9F9F9',
+        light: '#F3F3F3',
+        base: '#D1D6DE',
+        dark: '#666D78',
+        darker: '#2F3749',
+        darkest: '#111111',
+    },
+    mission: {
+        base: '#DE1D8D',
+        dark: '#C6187D',
+    },
+    complementary: {
+        base: '#197278',
+    },
+    electricity: {
+        base: '#E7A234',
+        dark: '#D1760A',
+    },
+    gas: {
+        base: '#26ADE4',
+        dark: '#3F64E6',
+    },
+    error: {
+        lightest: '#FAE8EC',
+        base: '#C7153E',
+        dark: '#8C0A28',
+    },
+};
+export var defaultTokens = {
+    borderWidths: {
+        standard: '1px',
+        heavy: '2px',
+        heavier: '4px',
+    },
+    radii: {
+        small: '4px',
+        medium: '8px',
+        large: '12px',
+    },
+    shadows: {
+        standard: {
+            color: '#000',
+            offset: '1px',
+            opacity: 0.15,
+            radius: '4px',
+            elevation: 3,
+        },
+    },
+    breakpoints: { small: 576, medium: 768, large: 1200 },
+    space: {
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+    },
+    fonts: {
+        body: 'OVOCircularTT-Book',
+        bold: 'OVOCircularTT-Bold',
+        heading: 'OVOCircularTT-Black',
+    },
+    lineHeights: {
+        standard: 1.5,
+    },
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
+    colors: {
+        primary: brand.primary.base,
+        primaryAlt: brand.primary.darker,
+        primaryContrast: '#FFFFFF',
+        primaryMuted: brand.primary.muted,
+        error: '#C7153E',
+        errorAlt: '#8C0A28',
+        errorContrast: '#FFFFFF',
+        errorMuted: '#FAE8EC',
+        focus: '#3F64E6',
+        focusMuted: '#C6D1F8',
+        canvas: '#FFFFFF',
+        body: brand.grey.darker,
+        heading: brand.grey.darker,
+        border: brand.grey.dark,
+        canvasMuted: '#F0F2F5',
+        borderMuted: brand.grey.base,
+        info: '#3F64E6',
+        infoAlt: '#004CA0',
+        infoContrast: '#FFFFFF',
+        infoMuted: '#ECF0FD',
+        warning: '#BE5409',
+        warningAlt: '#8A3C05',
+        warningContrast: '#FFFFFF',
+        warningMuted: '#F7F0E7',
+        success: brand.primary.base,
+        successAlt: brand.primary.darker,
+        successContrast: '#FFFFFF',
+        successMuted: brand.primary.muted,
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
+    },
+    responsiveFontSizes: {
+        label: ['11px', '14px'],
+        small: ['14px', '14px'],
+        body: ['16px', '16px'],
+        level1: ['28px', '48px'],
+        level2: ['24px', '32px'],
+        level3: ['20px', '28px'],
+        level4: ['16px', '22px'],
+        lead: ['18px', '22px'],
+    },
+    responsiveLineHeights: {
+        label: ['20px', '20px'],
+        small: ['20px', '20px'],
+        body: ['24px', '24px'],
+        level1: ['36px', '52px'],
+        level2: ['32px', '40px'],
+        level3: ['24px', '36px'],
+        level4: ['20px', '28px'],
+        lead: ['24px', '28px'],
+    },
+};
+export function createTheme(customTheme, additional) {
+    var mergeOptions = { arrayMerge: function (_, source) { return source; } };
+    var customThemeWithAdditional = deepMerge(customTheme, additional || {}, mergeOptions);
+    var theme = deepMerge(defaultTokens, customThemeWithAdditional, mergeOptions);
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
+    return deepMerge({
+        field: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            lineHeight: lineHeights.standard,
+            dateWidth: '265px',
+            gap: space[2],
+            error: {
+                color: colors.error,
+                fontFamily: fonts.bold,
+            },
+            hint: {
+                color: colors.border,
+            },
+            label: {
+                color: colors.heading,
+                fontFamily: fonts.bold,
+            },
+            subLabel: {
+                color: colors.border,
+            },
+            legend: {
+                marginBottom: space[1],
+            },
+            errorIndent: {
+                borderWidth: space[1],
+                borderRadius: radii.small,
+            },
+        },
+        focusRing: {
+            color: colors.focus,
+            width: borderWidths.heavy,
+            distance: borderWidths.heavy,
+        },
+        input: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            color: colors.body,
+            lineHeight: lineHeights.standard,
+            height: space[11],
+            borderColor: colors.border,
+            borderWidth: borderWidths.standard,
+            background: colors.canvas,
+            padding: space[2],
+            borderRadius: radii.small,
+            error: {
+                borderWidth: borderWidths.heavy,
+                color: colors.error,
+            },
+            icon: {
+                size: space[4],
+            },
+        },
+        card: {
+            background: colors.canvas,
+            borderWidth: borderWidths.standard,
+            borderColor: colors.borderMuted,
+            padding: [space[3], space[6], space[9]],
+        },
+        checkbox: {
+            touchSize: space[11],
+            size: space[6],
+            checkSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            borderRadius: radii.small,
+            background: colors.canvas,
+            checkedBackground: colors.infoMuted,
+            checkColor: colors.info,
+            errorColor: colors.error,
+        },
+        text: {
+            fontFamily: fonts.body,
+            lineHeight: 1,
+            color: colors.body,
+            p: {
+                fontSize: responsiveFontSizes.body,
+                lineHeight: responsiveLineHeights.body,
+                marginTop: [space[3], space[3]],
+                marginBottom: [space[3], space[3]],
+            },
+            small: {
+                fontSize: responsiveFontSizes.small,
+                lineHeight: responsiveLineHeights.small,
+            },
+            strong: {
+                fontFamily: fonts.bold,
+            },
+        },
+        list: {
+            marginTop: [space[2], space[3]],
+            marginBottom: [space[2], space[3]],
+            marginLeft: space[6],
+            listItem: {
+                fontSize: responsiveFontSizes.body,
+                lineHeight: responsiveLineHeights.body,
+                marginVertical: 2,
+                bulletGap: space[2],
+                bulletWidth: space[2],
+            },
+            descriptionTerm: {
+                color: colors.heading,
+                fontFamily: fonts.bold,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[1], space[1]],
+            },
+        },
+        textLink: {
+            fontFamily: fonts.body,
+            color: colors.primary,
+        },
+        heading: {
+            fontFamily: fonts.heading,
+            color: colors.heading,
+            heading1: {
+                fontSize: responsiveFontSizes.level1,
+                lineHeight: responsiveLineHeights.level1,
+                marginTop: [space[8], space[12]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading2: {
+                fontSize: responsiveFontSizes.level2,
+                lineHeight: responsiveLineHeights.level2,
+                marginTop: [space[6], space[8]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading3: {
+                fontSize: responsiveFontSizes.level3,
+                lineHeight: responsiveLineHeights.level3,
+                marginTop: [space[4], space[6]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading4: {
+                fontSize: responsiveFontSizes.level4,
+                lineHeight: responsiveLineHeights.level4,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[3], space[4]],
+            },
+        },
+        shadows: shadows,
+        radii: radii,
+        radio: {
+            touchSize: space[11],
+            size: space[8],
+            dotSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            background: colors.canvas,
+            dotColor: colors.info,
+            checkedBackground: colors.infoMuted,
+            errorColor: colors.error,
+        },
+        fontSizes: fontSizes,
+        fonts: fonts,
+        responsiveFontSizes: responsiveFontSizes,
+        responsiveLineHeights: responsiveLineHeights,
+        colors: colors,
+        borderWidths: borderWidths,
+        breakpoints: breakpoints,
+        lineHeights: lineHeights,
+        space: space,
+        grid: {
+            maxWidth: breakpoints.large + 'px',
+            gutter: [space[4], space[8]],
+        },
+        disclosure: {
+            iconGap: [space[1], space[2]],
+            panelGap: [space[2], space[3]],
+        },
+        accordion: {
+            header: {
+                color: colors.primary,
+                paddingVertical: [space[3], space[5]],
+                iconSize: space[4],
+                iconGap: space[3],
+            },
+        },
+    }, theme, mergeOptions);
+}

package/dist/esm/theme/index.js

@@ -0,0 +1,19 @@
+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);
+};
+import { themeNative } from '@ovotech/element-core';
+import { pxToNumber } from '../utils';
+import { createTheme } from './create-theme';
+export * from './create-theme';
+export var theme = createTheme(__assign({}, themeNative));
+export var calculateLineHeight = function (size, lineHeight) {
+    return pxToNumber(size) * (lineHeight || 1) + 'px';
+};

package/dist/esm/theme/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-layout.d.ts

@@ -0,0 +1,6 @@
+import { LayoutChangeEvent } from 'react-native';
+export declare const useLayout: (defaultHeight?: number) => readonly [{
+    height: number;
+    width: number;
+    measured: boolean;
+}, (e: LayoutChangeEvent) => void];

package/dist/hooks/use-layout.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = void 0;
+var react_1 = require("react");
+var useLayout = function (defaultHeight) {
+    var _a = (0, react_1.useState)({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
+    var onLayout = (0, react_1.useCallback)(function (e) {
+        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
+        if (height === layout.height && width === layout.width) {
+            return;
+        }
+        setLayout({
+            height: height,
+            width: width,
+            measured: true,
+        });
+    }, [layout.height, layout.width]);
+    return [layout, onLayout];
+};
+exports.useLayout = useLayout;

package/dist/providers/types.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
-export declare type IconName = 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-left-small' | 'chevron-left-small-first' | 'chevron-right' | 'chevron-right-small' | 'chevron-right-small-last' | 'chevron-up' | 'cross' | 'dollar' | 'download' | 'electricity' | 'euro' | 'gas' | 'help' | 'hide' | 'home' | 'info' | 'link' | 'logo' | 'minus' | 'new-window' | 'payment-card' | 'plus' | 'pound' | 'search' | 'show' | 'user';
+export declare type IconName = 'address' | 'advice' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'award' | 'battery' | 'cal' | 'cal-book' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart' | 'chart-filled' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-small' | 'chevron-left-small-first' | 'chevron-right' | 'chevron-right-small' | 'chevron-right-small-last' | 'chevron-up' | 'circle' | 'close-circle' | 'cross' | 'doc' | 'dollar' | 'download' | 'eco' | 'eco-home' | 'edit' | 'electric-car' | 'electric-home' | 'electricity' | 'energy-advice' | 'equals' | 'euro' | 'gas' | 'globe-address' | 'help' | 'hide' | 'home' | 'home-filled' | 'hydro-power' | 'info' | 'link' | 'logo' | 'mail' | 'mail-open' | 'menu' | 'message' | 'message-filled' | 'minus' | 'mobile' | 'new-window' | 'payment-card' | 'phone' | 'plus' | 'pound' | 'pricing' | 'search' | 'security' | 'show' | 'smart-home' | 'smart-meter' | 'solar' | 'star' | 'sun' | 'trees' | 'tune' | 'user' | 'user-filled' | 'wallet' | 'wallet-filled' | 'warm-home' | 'warning' | 'web-address' | 'wind-power';
 export declare type IconNameExtended = IconName | string;
 export declare type IconsType = Record<string, FunctionComponent<SvgProps>>;

package/dist/theme/create-theme.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from './theme';
+/**
+ * Use 3 level Partial instead of a Recursive Deep Partial, to avoid infinite nested recursion
+ * if any of the props contain recursive elements. For example logos / icons
+ */
+declare type ThreeLevelPartial<T> = {
+    [P in keyof T]?: TwoLevelPartial<T[P]>;
+};
+declare type TwoLevelPartial<T> = {
+    [P in keyof T]?: OneLevelPartial<T[P]>;
+};
+declare type OneLevelPartial<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+export declare type RequiredThemeKeys = Pick<Theme, 'borderWidths' | 'radii' | 'breakpoints' | 'shadows' | 'space' | 'fonts' | 'lineHeights' | 'fontSizes' | 'responsiveFontSizes' | 'responsiveLineHeights' | 'colors'>;
+export declare const defaultTokens: RequiredThemeKeys;
+export declare function createTheme<T, A = object>(customTheme: ThreeLevelPartial<Theme> & T, additional?: ThreeLevelPartial<Theme> & A): Theme & T & A;
+export {};