@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/Accordion/styles.js

@@ -0,0 +1,45 @@
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+export const StyledAccordion = styled(Animated.View)(({ theme: { semantic, core }, first, last, isExpanded }) => css `
+    width: 100%;
+    border-width: ${numToPx(core.borderWidth.small)};
+    border-color: ${semantic.border.differentiated};
+    border-bottom-width: 0;
+    background-color: ${isExpanded ? core.color.brand.white : 'transparent'};
+    transition: background-color ${core.transition.fast}ms;
+
+    ${first
+    ? {
+        borderTopLeftRadius: core.radius.small,
+        borderTopRightRadius: core.radius.small,
+    }
+    : null}
+
+    ${last
+    ? {
+        borderBottomLeftRadius: core.radius.small,
+        borderBottomRightRadius: core.radius.small,
+        borderBottomWidth: core.borderWidth.small,
+    }
+    : null}
+  `);
+export const StyledAccordionHeader = styled.TouchableOpacity(({ theme: { core } }) => css `
+    padding-top: ${numToPx(core.space[5])};
+    padding-left: ${numToPx(core.space[3])};
+    padding-right: 18px;
+    padding-bottom: 18px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  `);
+export const StyledContainer = styled.View(({ theme: { core } }) => css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-top: 0;
+    padding-right: ${numToPx(core.space[12])};
+    padding-bottom: ${numToPx(core.space[6])};
+    padding-left: ${numToPx(core.space[3])};
+  `);

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type AccordionProps = PropsWithChildren<{
+    title: ReactNode;
+    expanded?: boolean;
+    children?: ReactNode;
+    onToggle?: CallableFunction;
+    /**
+     * @deprecated inline prop is no longer affects styling
+     */
+    inline?: boolean;
+    first?: boolean;
+    last?: boolean;
+    testId?: string;
+}>;
+export type AccordionGroupProps = {
+    /**
+     * @deprecated inline prop is no longer affects styling
+     */
+    inline?: boolean;
+    headingComponent?: React.ComponentType<any>;
+};

package/dist/components/Accordion/types.js

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

package/dist/components/ActionCard/ActionCard.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { IconName } from '../../providers';
+import { CTAVariantName } from '../CTAButton/CTAButton';
+export type ActionCardProps = {
+    title: string;
+    body?: string | ReactElement<any>;
+    onPressCloseButton?: () => void;
+    onPressActionButton?: () => void;
+    onPressIndicator?: () => void;
+    onMount?: () => void;
+    ctaVariant?: CTAVariantName;
+    image?: ImageSourcePropType;
+    buttonTitle?: string;
+    actionIconName?: IconName;
+    accessibilityLabel?: string;
+    inverted?: boolean;
+    inline?: boolean;
+    testID?: string;
+};
+export declare const ActionCard: ({ accessibilityLabel, actionIconName, body, buttonTitle, ctaVariant, image, inline, inverted, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }: ActionCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionCard/ActionCard.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { useEffect } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
+import styled, { useTheme } from '../../styled.native';
+import { P } from '../P';
+import { IndicatorIconShape } from './IndicatorIconShape';
+const StyledPressableCard = styled.Pressable(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? core.space[4] : core.space[6];
+    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return `
+      border-radius: ${inline ? numToPx(core.space[6]) : 0};
+      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
+});
+const StyledCard = styled.View(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? core.space[4] : core.space[6];
+    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return `
+      border-radius: ${inline ? numToPx(core.space[6]) : 0};
+      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
+});
+const StyledP = styled(P)(({ theme: { semantic }, inverted }) => `
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+`);
+const CloseIconWrapper = styled.View(({ theme: { core, semantic } }) => `
+    padding: ${numToPx(core.space[2])};
+    background-color: ${semantic.surface.elevated};
+    border-radius: ${numToPx(core.space[6])};
+`);
+export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
+    const { core, semantic } = useTheme();
+    const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    const cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
+    const RootContainer = hasSingleAction
+        ? StyledPressableCard
+        : StyledCard;
+    useEffect(() => {
+        if (onMount) {
+            onMount();
+        }
+    }, []);
+    const Heading = inline ? Heading3 : Heading2;
+    const cardPadding = core.space[inline ? 4 : 6];
+    const negativeMarginAdjustment = -cardPadding;
+    return (_jsxs(RootContainer, { ...(cardAction ? { onPress: cardAction } : {}), inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+                                        color: inverted
+                                            ? semantic.inverted.message.link
+                                            : semantic.message.branded,
+                                        paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
+                                    }, testID: `${testID}-heading`, children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                                paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: `${testID}-button`, variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                            flex: 1,
+                            flexDirection: 'row',
+                            height: '100%',
+                            marginTop: negativeMarginAdjustment,
+                            marginRight: negativeMarginAdjustment,
+                        }, maskElement: _jsx(View, { style: {
+                                width: '100%',
+                                height: 165,
+                                backgroundColor: 'olive',
+                                transform: [
+                                    { rotate: '-16deg' },
+                                    { translateX: 40 },
+                                    { translateY: 25 },
+                                ],
+                            } }), children: _jsx(Image, { resizeMode: "cover", source: image, style: {
+                                width: '100%',
+                                height: 200,
+                                position: 'absolute',
+                                top: 0,
+                                right: 0,
+                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? (_jsxs(Pressable, { style: {
+                            position: 'absolute',
+                            right: negativeMarginAdjustment,
+                            bottom: negativeMarginAdjustment,
+                        }, onPress: onPressIndicator, testID: `${testID}-indicator-button`, children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+                                    position: 'absolute',
+                                    right: inline ? 8 : 6,
+                                    bottom: 16,
+                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
+                    position: 'absolute',
+                    right: core.space[2],
+                    top: core.space[2],
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
+};

package/dist/components/ActionCard/CloseIconShape.d.ts

@@ -0,0 +1,3 @@
+export declare const CloseIconShape: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionCard/CloseIconShape.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, ClipPath, Defs } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme: { semantic }, color }) => `
+  fill: ${color ?? semantic.message.branded}
+`);
+export const CloseIconShape = ({ color }) => (_jsxs(Svg, { width: 44, height: 44, children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, { id: "a", children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));

package/dist/components/ActionCard/IndicatorIconShape.d.ts

@@ -0,0 +1,3 @@
+export declare const IndicatorIconShape: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme: { semantic }, color }) => `
+  fill: ${color ?? semantic.message.branded}
+`);
+export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));

package/dist/components/ActionCard/index.d.ts

@@ -0,0 +1 @@
+export { ActionCard } from './ActionCard';

package/dist/components/ActionCard/index.js

@@ -0,0 +1 @@
+export { ActionCard } from './ActionCard';

package/dist/components/ActionList/ActionList.d.ts

@@ -0,0 +1,25 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { AccessibilityRole, TouchableOpacityProps, View, ViewProps } from 'react-native';
+import { IconName } from '../../providers';
+type ActionListProps = ViewProps & {
+    borderBottom?: boolean;
+    inverted?: boolean;
+};
+type ActionProps = PropsWithChildren<TouchableOpacityProps & {
+    accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    inverted?: boolean;
+    inline?: boolean;
+    onPress?: () => void;
+    fullWidth?: boolean;
+    ref?: RefObject<View | null>;
+    testID?: string;
+    inList?: boolean;
+    standalone?: boolean;
+}>;
+declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
+declare const Action: ({ accessibilityRole, accessibilityLabel, accessibilityHint, children, fullWidth, inverted, inline, onPress, testID, iconLeft, iconRight, standalone, ref, ...rest }: ActionProps) => import("react/jsx-runtime").JSX.Element;
+export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getValidChildren } from '../../utils';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
+const ActionList = ({ children, inverted, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    const childCount = Children.count(validChildren);
+    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            fullWidth: true,
+            index,
+            hasBorder: childCount > 1 && index !== childCount - 1,
+            inverted: child.props.inverted ?? inverted, // prioritise child prop
+            inList: true,
+            iconRight: child.props.iconRight ?? 'chevron-right-small',
+        })) }));
+};
+const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inline = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, ...rest, children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) }));
+const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, inline = false, onPress, testID, iconLeft, iconRight, standalone = false, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest?.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
+};
+export { ActionList, Action };

package/dist/components/ActionList/index.d.ts

@@ -0,0 +1 @@
+export { Action, ActionList } from './ActionList';

package/dist/components/ActionList/index.js

@@ -0,0 +1 @@
+export { Action, ActionList } from './ActionList';