@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

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

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

package/dist/components/Accordion/Accordion.js

@@ -55,7 +55,7 @@ var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var use_layout_1 = require("../../hooks/use-layout");
 var styled_native_1 = require("../../styled.native");
-var Heading4_1 = require("../Heading4");
+var Heading_1 = require("../Heading");
 var Group_1 = require("./Group");
 var Icon_1 = require("./Icon");
 var styles_1 = require("./styles");
@@ -77,13 +77,16 @@ function withAnimated(WrappedComponent) {
 }
 exports.withAnimated = withAnimated;
 var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
-    var _c = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _c.core, semantic = _c.semantic;
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     var Header = (0, react_1.useContext)(Group_1.AccordionGroupContext).Header;
-    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4_1.Heading4;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_1.Heading4;
     var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
     var _d = (0, use_layout_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
     var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
+    var initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [layout.height]);
     var size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
     (0, react_1.useEffect)(function () {
@@ -118,17 +121,16 @@ var Accordion = function (_a) {
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
     var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
     }); }, [progress]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
                             headerStyle,
                             {
-                                paddingTop: core.space[1],
-                                paddingRight: core.space[3],
+                                paddingRight: theme.space[300],
                                 marginTop: 0,
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
+                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress, "$variant": variant })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
 };
 exports.Accordion = Accordion;

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

@@ -32,11 +32,14 @@ var styled_native_1 = require("../../styled.native");
 var OVO_LOGO_ANGLE = 105;
 var AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
 function AccordionIcon(_a) {
-    var animationTiming = _a.animationTiming;
-    var _b = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _b.core, semantic = _b.semantic;
+    var animationTiming = _a.animationTiming, $variant = _a.$variant;
+    var color = (0, react_1.useContext)(styled_native_1.ThemeContext).color;
+    var initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    var expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    var initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
     var outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
-        height: 36 - animationTiming.value * 4,
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
     }); }, [animationTiming]);
@@ -51,12 +54,12 @@ function AccordionIcon(_a) {
     }); }, [animationTiming]);
     return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
             {
-                backgroundColor: semantic.surface.cutout,
+                backgroundColor: color.surface.dim,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: innerAnimatedStyles, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, { width: "16", height: "16", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: innerAnimatedStyles, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
 }
 exports.AccordionIcon = AccordionIcon;