@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

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

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

package/dist/components/Accordion/Accordion.js

@@ -50,15 +50,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = exports.withAnimated = void 0;
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var theme_1 = require("../../theme");
+var styled_native_1 = require("../../styled.native");
+var utils_1 = require("../../utils");
 var Heading_1 = require("../Heading");
 var Icon_1 = require("./Icon");
 var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
-var _a = theme_1.theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
 function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
@@ -68,21 +68,22 @@ function withAnimated(WrappedComponent) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         WithAnimated.prototype.render = function () {
-            return react_1.default.createElement(WrappedComponent, __assign({}, this.props));
+            return (0, jsx_runtime_1.jsx)(WrappedComponent, __assign({}, this.props));
         };
         WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
         return WithAnimated;
-    }(react_1.default.Component));
+    }(react_1.Component));
     return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
 }
 exports.withAnimated = withAnimated;
 var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading_1.Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading_1.Heading4 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var _d = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _d.core, semantic = _d.semantic;
     var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(headingComponent); }, [
         headingComponent,
     ]);
-    var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
-    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
+    var _e = (0, hooks_1.useLayout)(0), layout = _e[0], onLayout = _e[1];
+    var _f = (0, react_1.useState)(expanded), open = _f[0], setOpen = _f[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -117,23 +118,19 @@ var Accordion = function (_a) {
         }
         setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [styles_1.styles.content, style]; }, [style]);
+    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], [greyDarker, primary]),
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    var backgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [canvas, canvasMuted]),
-    }); });
-    return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
-            backgroundStyle,
-            styles_1.styles.accordion,
-            first ? styles_1.styles.topItem : null,
-            last ? styles_1.styles.bottomItem : null,
-        ] },
-        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: open }, onPress: toggleOpen, style: styles_1.styles.accordionHeader, testID: "accordionTitle" },
-            react_1.default.createElement(AnimatedHeading, { style: [headerStyle, styles_1.styles.accordionHeaderText] }, title),
-            react_1.default.createElement(Icon_1.AccordionIcon, { animationTiming: progress })),
-        react_1.default.createElement(react_native_reanimated_1.default.View, { style: containerAnimatedStyle },
-            react_1.default.createElement(react_native_1.View, { onLayout: onLayout, style: styles_1.styles.container }, children))));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, __assign({ first: first, last: last }, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, __assign({ style: [
+                            headerStyle,
+                            {
+                                paddingTop: (0, utils_1.pxToNumber)(core.space[1]),
+                                paddingRight: (0, utils_1.pxToNumber)(core.space[3]),
+                                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, __assign({ style: containerAnimatedStyle }, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, __assign({ onLayout: onLayout }, { children: children })) }))] })));
 };
 exports.Accordion = Accordion;

package/dist/components/Accordion/Group.js

@@ -1,41 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionGroup = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_1 = require("react-native");
 var AccordionGroup = function (_a) {
     var children = _a.children;
     var childCount = react_1.Children.count(children);
-    return (react_1.default.createElement(react_native_1.View, null, react_1.Children.map(children, function (child, i) {
-        return (0, react_1.isValidElement)(child)
-            ? (0, react_1.cloneElement)(child, {
-                first: i === 0,
-                last: i === childCount - 1,
-            })
-            : child;
-    })));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: react_1.Children.map(children, function (child, i) {
+            return (0, react_1.isValidElement)(child)
+                ? (0, react_1.cloneElement)(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child;
+        }) }));
 };
 exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

@@ -1,4 +1,15 @@
 "use strict";
+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);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,22 +33,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionIcon = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 var react_native_svg_1 = require("react-native-svg");
-var theme_1 = require("../../theme");
-var _a = theme_1.theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+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 outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [primaryMuted, primary]),
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
         height: 36 - animationTiming.value * 4,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
@@ -51,18 +60,14 @@ function AccordionIcon(_a) {
     var minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
         opacity: animationTiming.value,
     }); });
-    return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: [
             {
-                backgroundColor: primaryMuted,
+                backgroundColor: semantic.surface.cutout,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ] },
-        react_1.default.createElement(react_native_reanimated_1.default.View, { style: innerAnimatedStyles },
-            react_1.default.createElement(react_native_svg_1.Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
-                react_1.default.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
-                react_1.default.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
+        ] }, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: innerAnimatedStyles }, { children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, __assign({ 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 })] })) })) })));
 }
 exports.AccordionIcon = AccordionIcon;

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

@@ -1,4 +1,4 @@
-import type { LayoutChangeEvent } from 'react-native';
+import { LayoutChangeEvent } from 'react-native';
 export declare const useLayout: (defaultHeight?: number) => readonly [{
     height: number;
     width: number;

package/dist/components/Accordion/hooks.js

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLayout = void 0;
-var react_1 = __importStar(require("react"));
+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 = react_1.default.useCallback(function (e) {
+    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;
@@ -35,7 +12,7 @@ var useLayout = function (defaultHeight) {
         setLayout({
             height: height,
             width: width,
-            measured: true
+            measured: true,
         });
     }, [layout.height, layout.width]);
     return [layout, onLayout];