@ovotech/element-native 5.4.2 → 5.4.3-canary-faec600-428

package/dist/{src/components → components}/Cards/IconTextCard/IconTextCard.js

@@ -2,15 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useTheme } from '../../../styled.native';
 import { Heading2, Heading4 } from '../../Heading';
 import { Icon } from '../../Icon';
+import { resolveColor } from '../shared';
 import { CardWithIconText, Subtitle, TextContainer, TitleContainer, } from './IconTextCard.styles';
 export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
     const isSmall = size === 'small';
     const theme = useTheme();
-    const resolveColor = (colorKey) => {
-        if (colorKey === 'onSurface')
-            return theme.color.surface.onSurface;
-        return theme.color.brand.brand;
-    };
     const titleLineHeight = theme.font.lineHeight[isSmall ? 'lg' : '3xl'].mediaQuery.sm;
     const renderTitle = () => {
         if (!title)
@@ -19,11 +15,11 @@ export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
         if (typeof title === 'string') {
             return (_jsx(HeadingComponent, { style: { lineHeight: titleLineHeight }, children: title }));
         }
-        return (_jsx(_Fragment, { children: title.map((segment, index) => (_jsx(HeadingComponent, { style: {
+        return (_jsx(_Fragment, { children: title.map(segment => (_jsx(HeadingComponent, { style: {
                     color: resolveColor(segment.color),
                     lineHeight: titleLineHeight,
                     marginRight: isSmall ? 3 : 4,
-                }, children: segment.text }, index))) }));
+                }, children: segment.text }, segment.text))) }));
     };
     return (_jsxs(CardWithIconText, { isSmall: isSmall, children: [_jsx(Icon, { name: icon, size: 24 }), _jsxs(TextContainer, { isSmall: isSmall, children: [_jsx(TitleContainer, { children: renderTitle() }), !isSmall && subTitle && _jsx(Subtitle, { children: subTitle })] })] }));
 };

package/dist/{src/components → components}/Cards/IconTextCard/IconTextCard.styles.d.ts

@@ -510,7 +510,9 @@ export declare const CardWithIconText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1085,7 +1087,9 @@ export declare const TextContainer: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1660,7 +1664,9 @@ export declare const TitleContainer: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2237,7 +2243,9 @@ export declare const Subtitle: import("styled-components").StyledComponent<(prop
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{esm/src/components → components}/Cards/IconTextCard/IconTextCard.styles.js

@@ -2,8 +2,9 @@ import { View } from 'react-native';
 import styled from '../../../styled.native';
 import { Card } from '../../Card/Card';
 import { P } from '../../P';
-export const CardWithIconText = styled(Card)(({ theme, isSmall }) => ({
-    minHeight: isSmall ? 172 : undefined,
+import { SmallCardHeight } from '../shared';
+export const CardWithIconText = styled(Card)(({ isSmall, theme }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
     gap: theme.space[600],
 }));
 export const TextContainer = styled(View)(({ isSmall }) => ({

package/dist/{src/components → components}/Cards/LinkTextCard/LinkTextCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImageSourcePropType } from 'react-native';
-export type Props = {
+type Props = {
     image?: ImageSourcePropType;
     badge?: string;
     title: string;
@@ -9,3 +9,4 @@ export type Props = {
     onPress?: () => void;
 };
 export declare const LinkTextCard: React.FC<Props>;
+export {};

package/dist/{src/components → components}/Cards/LinkTextCard/LinkTextCard.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image, View } from 'react-native';
 import { Strong } from '../..';
 import { CardBadge, CardWithLinkText, ImageContent, Subtitle, TextContent, Title, } from './LinkTextCard.styles';
-//@ts-ignore
-import Illustration from './link-text-image.png';
 export const LinkTextCard = ({ image, badge, title, subtitle, size, onPress, }) => {
     const isSmall = size === 'small';
     const hasBadge = !!badge;
-    const CardContent = (_jsxs(CardWithLinkText, { isSmall: isSmall, hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: isSmall, children: [_jsx(View, { children: _jsx(Title, { isSmall: isSmall, children: _jsx(Strong, { children: title }) }) }), !isSmall && (_jsx(View, { children: _jsx(Subtitle, { children: subtitle }) }))] }), _jsx(ImageContent, { children: _jsx(Image, { source: image ? image : Illustration, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
+    const CardContent = (_jsxs(CardWithLinkText, { isSmall: isSmall, hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: isSmall, children: [_jsx(View, { children: _jsx(Title, { isSmall: isSmall, children: _jsx(Strong, { children: title }) }) }), !isSmall && (_jsx(View, { children: _jsx(Subtitle, { children: subtitle }) }))] }), _jsx(ImageContent, { children: _jsx(Image, { source: image
+                        ? image
+                        : {
+                            uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
+                        }, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
     if (!hasBadge) {
         return CardContent;
     }

package/dist/{src/components → components}/Cards/LinkTextCard/LinkTextCard.styles.d.ts

@@ -510,7 +510,9 @@ export declare const CardWithLinkText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1091,7 +1093,9 @@ export declare const CardBadge: import("styled-components").StyledComponent<({ c
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -1667,7 +1671,9 @@ export declare const CardBadge: import("styled-components").StyledComponent<({ c
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2240,7 +2246,9 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2815,7 +2823,9 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3392,7 +3402,9 @@ export declare const Title: import("styled-components").StyledComponent<(props:
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3971,7 +3983,9 @@ export declare const Subtitle: import("styled-components").StyledComponent<(prop
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type EPCMarker = {
+    value: number;
+};
+export type EPCBarProps = {
+    marker1: EPCMarker;
+    marker2?: EPCMarker;
+};
+export declare const EPCBar: React.FC<EPCBarProps>;

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCBar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { EPCBarMarkerLayer, EPCBarSegment, ProgressBarContainer, ProgressBarWrapper, } from '../ProgressBarCard.styles';
+import { Marker1, Marker2 } from './EPCMarkers';
+const EPC_BANDS = [
+    { letter: 'G', min: 0, max: 20, color: '#E21D38' },
+    { letter: 'F', min: 21, max: 38, color: '#E55B2B' },
+    { letter: 'E', min: 39, max: 54, color: '#EA7E24' },
+    { letter: 'D', min: 55, max: 68, color: '#F0C119' },
+    { letter: 'C', min: 69, max: 80, color: '#85BB41' },
+    { letter: 'B', min: 81, max: 91, color: '#12A652' },
+    { letter: 'A', min: 92, max: 100, color: '#007D55' },
+];
+const MIN_SCORE = EPC_BANDS[0].min;
+const MAX_SCORE = EPC_BANDS[EPC_BANDS.length - 1].max;
+const BAND_WIDTH = 100 / EPC_BANDS.length;
+const scoreToPositionPercent = (rawScore) => {
+    if (Number.isNaN(rawScore) || rawScore < MIN_SCORE || rawScore > MAX_SCORE) {
+        return null;
+    }
+    const bandIndex = EPC_BANDS.findIndex(band => rawScore >= band.min && rawScore <= band.max);
+    const band = EPC_BANDS[bandIndex];
+    let fractionWithinBand;
+    if (band.max === band.min) {
+        fractionWithinBand = 1;
+    }
+    else {
+        const denom = band.max - band.min;
+        fractionWithinBand = (rawScore - band.min) / denom;
+    }
+    return (bandIndex + fractionWithinBand) * BAND_WIDTH;
+};
+const positionMarker = (score, translate) => {
+    const position = scoreToPositionPercent(score);
+    if (position === null)
+        return null;
+    return {
+        position: 'absolute',
+        left: `${position}%`,
+        top: '50%',
+        transform: [{ translateX: -translate }, { translateY: -translate }],
+    };
+};
+export const EPCBar = ({ marker1, marker2 }) => {
+    const marker1Style = positionMarker(marker1.value, 4);
+    const marker2Style = marker2 ? positionMarker(marker2.value, 5) : null;
+    return (_jsxs(ProgressBarWrapper, { children: [_jsx(ProgressBarContainer, { children: EPC_BANDS.map(band => (_jsx(EPCBarSegment, { style: { flex: 1, backgroundColor: band.color } }, band.letter))) }), _jsxs(EPCBarMarkerLayer, { children: [marker1Style && (_jsx(View, { style: marker1Style, children: _jsx(Marker1, {}) })), marker2 && marker2Style && (_jsx(View, { style: marker2Style, children: _jsx(Marker2, {}) }))] })] }));
+};

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCMarkers.d.ts

@@ -0,0 +1,2 @@
+export declare const Marker1: () => import("react/jsx-runtime").JSX.Element;
+export declare const Marker2: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Cards/ProgressBarCard/ProgressBar/EPCMarkers.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+import { useTheme } from '../../../../styled.native';
+export const Marker1 = () => {
+    const theme = useTheme();
+    return (_jsx(Svg, { width: theme.space[200], height: theme.space[200], viewBox: "0 0 8 8", fill: "none", children: _jsx(Circle, { cx: "4", cy: "4", r: "4", fill: theme.color.green[80] }) }));
+};
+export const Marker2 = () => {
+    const theme = useTheme();
+    return (_jsxs(Svg, { width: theme.space[250], height: theme.space[250], viewBox: "0 0 10 10", fill: "none", children: [_jsx(G, { clipPath: "url(#clip0_23708_1077)", children: _jsx(Path, { d: "M8.92 5.78L9.9 5.97C9.96 5.65 10 5.33 10 5H8C8 5.2 7.98 5.4 7.94 5.59L8.92 5.78ZM7.22 8.33L7.78 9.16C8.32 8.8 8.79 8.33 9.16 7.78L8.33 7.22L7.5 6.66C7.28 6.99 7 7.27 6.67 7.49L7.23 8.32L7.22 8.33ZM5 9V10C5.33 10 5.66 9.97 5.97 9.9L5.78 8.92L5.59 7.94C5.4 7.98 5.21 8 5 8V9ZM4.22 8.92L4.03 9.9C4.35 9.96 4.67 10 5 10V8C4.8 8 4.6 7.98 4.41 7.94L4.22 8.92ZM1.67 7.22L0.84 7.78C1.2 8.32 1.67 8.79 2.22 9.16L2.78 8.33L3.34 7.5C3.01 7.28 2.73 7 2.51 6.67L1.68 7.23L1.67 7.22ZM1 5H0C0 5.33 0.03 5.66 0.1 5.97L1.08 5.78L2.06 5.59C2.02 5.4 2 5.21 2 5H1ZM1.08 4.22L0.1 4.03C0.04 4.35 0 4.67 0 5H2C2 4.8 2.02 4.6 2.06 4.41L1.08 4.22ZM2.78 1.67L2.22 0.84C1.68 1.2 1.21 1.67 0.84 2.22L1.67 2.78L2.5 3.34C2.72 3.01 3 2.73 3.33 2.51L2.77 1.68L2.78 1.67ZM5 1V0C4.67 0 4.34 0.03 4.03 0.1L4.22 1.08L4.41 2.06C4.6 2.02 4.79 2 5 2V1ZM5.78 1.08L5.97 0.1C5.65 0.04 5.33 0 5 0V2C5.2 2 5.4 2.02 5.59 2.06L5.78 1.08ZM8.33 2.78L9.16 2.22C8.8 1.68 8.33 1.21 7.78 0.84L7.22 1.67L6.66 2.5C6.99 2.72 7.27 3 7.49 3.33L8.32 2.77L8.33 2.78ZM9 5H10C10 4.67 9.97 4.34 9.9 4.03L8.92 4.22L7.94 4.41C7.98 4.6 8 4.79 8 5H9Z", fill: theme.color.green[80] }) }), _jsx(Defs, { children: _jsx(ClipPath, { id: "clip0_23708_1077", children: _jsx(Rect, { width: "10", height: "10", fill: "white" }) }) })] }));
+};

package/dist/components/Cards/ProgressBarCard/ProgressBar/ValueBar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ValueBarProps = {
+    value1: number;
+    value2?: number;
+};
+export declare const ValueBar: React.FC<ValueBarProps>;

package/dist/components/Cards/ProgressBarCard/ProgressBar/ValueBar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useTheme } from '../../../../styled.native';
+import { ProgressBarContainer, ProgressBarWrapper, ValueBarRemainder, } from '../ProgressBarCard.styles';
+const clampToNonNegative = (n) => Math.max(0, n);
+export const ValueBar = ({ value1, value2 }) => {
+    const theme = useTheme();
+    const hasSecond = !!value2;
+    const value1Flex = clampToNonNegative(value1 ?? 0);
+    const value2Flex = hasSecond ? clampToNonNegative(value2) : 0;
+    if (hasSecond && value1Flex + value2Flex > 0) {
+        return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                            flex: value1Flex,
+                            backgroundColor: theme.color.brand.brand,
+                        } }), _jsx(View, { style: {
+                            flex: value2Flex,
+                            backgroundColor: theme.color.surface.onSurface,
+                        } })] }) }));
+    }
+    return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                        flex: value1Flex,
+                        backgroundColor: theme.color.brand.brand,
+                    } }), _jsx(ValueBarRemainder, { style: { flex: 100 - value1Flex } })] }) }));
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TitleSegment } from '../types';
+type ProgressBar = {
+    variant: 'epc' | 'value';
+    data: number;
+    data2?: number;
+};
+type Value = {
+    text: string | TitleSegment[];
+    text2?: string | TitleSegment;
+    subtext?: string;
+};
+type Props = {
+    heading: string;
+    subheading?: string;
+    progressBar: ProgressBar;
+    value: Value;
+    value2?: Value;
+    size?: 'default' | 'small';
+};
+export declare const ProgressBarCard: React.FC<Props>;
+export {};

package/dist/components/Cards/ProgressBarCard/ProgressBarCard.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { Heading2, Heading4, P, Strong } from '../..';
+import { useTheme } from '../../../styled.native';
+import { resolveColor } from '../shared';
+import { EPCBar } from './ProgressBar/EPCBar';
+import { Marker1, Marker2 } from './ProgressBar/EPCMarkers';
+import { ValueBar } from './ProgressBar/ValueBar';
+import { CardWithProgressBar, HeadingContainer, StyledP, ValueBlockWrapper, ValuesContainer, ValueTextContainer, ValueWrapper, } from './ProgressBarCard.styles';
+const ValueText1 = ({ text }) => {
+    if (!text)
+        return null;
+    if (typeof text === 'string') {
+        return _jsx(Heading2, { children: text });
+    }
+    return (_jsx(_Fragment, { children: text.map((segment, index) => (_jsx(Heading2, { style: { color: resolveColor(segment.color) }, children: segment.text }, `${index}-${segment.text}`))) }));
+};
+const ValueText2 = ({ text2, hasEPCBar }) => {
+    if (!text2)
+        return null;
+    const { text, color } = typeof text2 === 'string'
+        ? { text: text2, color: 'default' }
+        : { text: text2.text, color: text2.color };
+    const resolvedColor = resolveColor(color);
+    return (_jsx(ValueTextContainer, { children: _jsxs(Heading4, { style: { color: resolvedColor }, children: ["(", text, hasEPCBar && ' points', ")"] }) }));
+};
+const ValueBlockComponent = ({ value, value2, size, hasEPCBar, markerType, }) => {
+    const showMarker = value.subtext && hasEPCBar;
+    const isSmall = size === 'small';
+    const theme = useTheme();
+    return (_jsxs(ValueWrapper, { isSmall: isSmall, hasValue2: !!value2, children: [_jsxs(ValuesContainer, { children: [_jsx(ValueText1, { text: value.text }), _jsx(ValueText2, { text2: value.text2, hasEPCBar: hasEPCBar })] }), _jsxs(View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: theme.space[150],
+                }, children: [showMarker && markerType === 'marker1' && _jsx(Marker1, {}), showMarker && markerType === 'marker2' && _jsx(Marker2, {}), value.subtext && _jsx(P, { children: value.subtext })] })] }));
+};
+const ValueBlock = React.memo(ValueBlockComponent);
+export const ProgressBarCard = ({ heading, subheading, progressBar, value, value2, size, }) => {
+    const isSmall = size === 'small';
+    const isEpc = progressBar.variant === 'epc';
+    const isValueBar = progressBar.variant === 'value';
+    return (_jsxs(CardWithProgressBar, { isSmall: isSmall, children: [_jsxs(HeadingContainer, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: heading }) }), _jsx(P, { size: "sm", children: subheading })] }), _jsxs(View, { children: [isEpc && (_jsx(EPCBar, { marker1: { value: progressBar.data }, marker2: progressBar.data2 ? { value: progressBar.data2 } : undefined })), isValueBar && (_jsx(ValueBar, { value1: progressBar.data, value2: progressBar.data2 })), _jsxs(ValueBlockWrapper, { children: [_jsx(ValueBlock, { value: value, value2: value2, hasEPCBar: isEpc, markerType: "marker1", size: size }), value2 && !isSmall && (_jsx(ValueBlock, { value: value2, hasEPCBar: isEpc, markerType: "marker2" }))] })] })] }));
+};