@ovotech/element-native 5.4.1 → 5.4.2-canary-5808439-426

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

@@ -1,5 +1,4 @@
-import { ComponentType } from 'react';
 import { AnimatedProps } from 'react-native-reanimated';
 import { AccordionProps } from './types';
-export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): ComponentType<AnimatedProps<T>>;
-export declare const Accordion: ({ expanded, first, last, title, children, onToggle, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare function withAnimated<T extends object>(WrappedComponent: React.ComponentType<T>): React.ComponentType<AnimatedProps<T>>;
+export declare const Accordion: ({ expanded, first, last, title, children, onToggle, variant, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -3,7 +3,7 @@ import { Component, useCallback, useContext, useEffect, useMemo, useState, } fro
 import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLayout } from '../../hooks/use-layout';
 import { useTheme } from '../../styled.native';
-import { Heading4 } from '../Heading4';
+import { Heading4 } from '../Heading';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
@@ -16,15 +16,19 @@ export function withAnimated(WrappedComponent) {
         }
     }
     WithAnimated.displayName = `WithAnimated(${displayName})`;
+    // @ts-ignore
     return Animated.createAnimatedComponent(WithAnimated);
 }
-export const Accordion = ({ expanded = false, first, last, title, children, onToggle, }) => {
-    const { core, semantic } = useTheme();
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
+    const theme = useTheme();
     const { Header } = useContext(AccordionGroupContext);
     const AccordionHeading = Header ?? Heading4;
     const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
     const [layout, onLayout] = useLayout(0);
     const [open, setOpen] = useState(expanded);
+    const initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
     const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
     const size = useSharedValue(handleHeightContent);
     useEffect(() => {
@@ -50,16 +54,15 @@ export const Accordion = ({ expanded = false, first, last, title, children, onTo
     }, [handleHeightContent, open, size]);
     const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
     const headerStyle = useAnimatedStyle(() => ({
-        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
     }), [progress]);
-    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
                             headerStyle,
                             {
-                                paddingTop: core.space[1],
-                                paddingRight: core.space[3],
+                                paddingRight: theme.space[300],
                                 marginTop: 0,
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
 };

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

@@ -1,4 +1,5 @@
 import { SharedValue } from 'react-native-reanimated';
-export declare function AccordionIcon({ animationTiming, }: {
+export declare function AccordionIcon({ animationTiming, $variant, }: {
     animationTiming: SharedValue<number>;
+    $variant: 'default' | 'brand';
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Icon.js

@@ -5,11 +5,14 @@ import { Path, Svg } from 'react-native-svg';
 import { ThemeContext } from '../../styled.native';
 const OVO_LOGO_ANGLE = 105;
 const AnimatedPath = Animated.createAnimatedComponent(Path);
-export function AccordionIcon({ animationTiming, }) {
-    const { core, semantic } = useContext(ThemeContext);
+export function AccordionIcon({ animationTiming, $variant, }) {
+    const { color } = useContext(ThemeContext);
+    const initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    const expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    const initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
     const outerAnimatedStyles = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
-        height: 36 - animationTiming.value * 4,
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
     }), [animationTiming]);
@@ -24,11 +27,11 @@ export function AccordionIcon({ animationTiming, }) {
     }), [animationTiming]);
     return (_jsx(Animated.View, { style: [
             {
-                backgroundColor: semantic.surface.cutout,
+                backgroundColor: color.surface.dim,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "16", height: "16", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
 }