@ovotech/element-native 2.0.3 → 2.1.0

package/dist/esm/components/NavHeader/NavHeader.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import styled, { css } from '../../styled.native';
@@ -20,30 +20,29 @@ var LeftHeaderText = styled(StyledText)(function (_a) {
     var space = _a.theme.space;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
 });
-var FeedbackText = styled(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
 var HeadlineView = styled(Animated.View)(function (_a) {
     var space = _a.theme.space;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
 });
 var RootView = styled.View(function (_a) {
     var colors = _a.theme.colors;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
 });
 var StyledView = styled(Animated.View)(function (_a) {
     var space = _a.theme.space, marginTop = _a.marginTop;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
 });
 var StyledHeading4 = styled(Heading4)(function (_a) {
     var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
 });
 var StyledHeading3 = styled(Heading3)(function (_a) {
     var colors = _a.theme.colors;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
 });
 export var NavHeader = function (_a) {
     var options = _a.options, headline = _a.headline;
-    return (React.createElement(RootView, { layout: Layout.duration(150) },
+    return (React.createElement(RootView, { layout: Layout === null || Layout === void 0 ? void 0 : Layout.duration(150) },
         React.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
             (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (React.createElement(TouchableOpacity, { style: {
                     flexDirection: 'row',
@@ -56,8 +55,7 @@ export var NavHeader = function (_a) {
                 React.createElement(LeftHeaderText, null, "Back"))) : null,
             React.createElement(Animated.View, { entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
                 React.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
-            React.createElement(TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
-                React.createElement(FeedbackText, null, "Feedback"))),
+            React.createElement(View, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } }, options.headerRight ? options.headerRight() : null)),
         headline ? (React.createElement(HeadlineView, { entering: FadeIn, exiting: FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (React.createElement(StyledHeading3, null, options.title)) : null)) : null));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/esm/components/Radio/Radio.js

@@ -56,9 +56,9 @@ var StyledRadioInputDot = styled.View(function (_a) {
     return "\n      width: ".concat(radio.dotSize, ";\n      height: ").concat(radio.dotSize, ";\n      margin: ").concat(dotDistance, "px;\n      border-radius: ").concat(radioSize / 2, "px;\n      background: ").concat(radio.dotColor, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
-    var checked = _a.checked, invalid = _a.invalid, rest = __rest(_a, ["checked", "invalid"]);
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (React.createElement(StyledRadioInputWrapper, __assign({}, rest),
-        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked },
+        React.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
             React.createElement(StyledRadioInputDot, { checked: checked }))));
 };
 var RadioLabelText = styled(LabelText)(function (_a) {
@@ -71,12 +71,10 @@ var Radio = forwardRef(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-    activeOpacity = _b === void 0 ? 0.8 : _b, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity"]);
-    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, 
-        // @ts-ignore
-        invalid: invalid }, rest),
+    activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest),
         React.createElement(StyledWrapper, null,
-            React.createElement(Input, { checked: checked, invalid: invalid }),
+            React.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
             React.createElement(View, { style: { flexShrink: 1 } },
                 React.createElement(RadioLabelText, null, label),
                 hint ? React.createElement(HintText, null, hint) : null))));

package/dist/esm/components/SkeletonLoading/SkeletonAnimation.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, Platform } from 'react-native';
+export var SkeletonAnimation = function (_a) {
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? 'pulse' : _b, testID = _a.testID;
+    var animationRef = useRef(new Animated.Value(0));
+    var animationLoop = useRef();
+    useEffect(function () {
+        animationLoop.current = Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        Animated.loop(animationLoop.current).start();
+    }, []);
+    return (React.createElement(View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID }, animation === 'pulse' ? (React.createElement(Animated.View, { style: [
+            {
+                height: '100%',
+                width: '100%',
+                opacity: animationRef.current.interpolate({
+                    inputRange: [0.25, 1, 2],
+                    outputRange: [1, 0.25, 1],
+                }),
+            },
+        ] }, children)) : (React.createElement(View, null, children))));
+};

package/dist/esm/components/SkeletonLoading/SkeletonCTA.js

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCTA = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n    height: ").concat(space[12], ";\n  ");
 });
 export var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest)));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCTA, __assign({ as: P, size: size }, rest))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonCircle.js

@@ -24,6 +24,7 @@ import React from 'react';
 import styled from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonCircleWrapper = styled(Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
@@ -34,6 +35,7 @@ var StyledSkeletonCircle = styled(Skeleton)(function (_a) {
 });
 export var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
-        React.createElement(StyledSkeletonCircle, { size: size })));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonCircleWrapper, __assign({ size: size }, rest),
+            React.createElement(StyledSkeletonCircle, { size: size }))));
 };

package/dist/esm/components/SkeletonLoading/SkeletonHeading.js

@@ -24,11 +24,13 @@ import React from 'react';
 import styled from '../../styled.native';
 import { Heading3 } from '../Heading';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonHeading = styled(Skeleton)(function (_a) {
     var colors = _a.theme.colors, size = _a.size;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    width: ").concat(size, ";\n  ");
 });
 export var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
-    return (React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0"));
+    return (React.createElement(SkeletonAnimation, null,
+        React.createElement(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest), "\u00A0")));
 };

package/dist/esm/components/SkeletonLoading/SkeletonText.js

@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { View } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 import { P } from '../Text';
 import { Skeleton } from './Skeleton';
+import { SkeletonAnimation } from './SkeletonAnimation';
 var StyledSkeletonText = styled(Skeleton)(function (_a) {
     var _b = _a.theme, colors = _b.colors, space = _b.space, responsiveFontSizes = _b.responsiveFontSizes, short = _a.short, breakpoints = _a.breakpoints;
     return "\n    background-color: ".concat(colors.borderMuted, ";\n    margin-bottom: ").concat(space[2], ";\n    ").concat(responsiveStyle('height', responsiveFontSizes.body, breakpoints), "\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
@@ -38,5 +38,5 @@ export var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(React.createElement(StyledSkeletonText, { key: "line-".concat(i), short: i === lines, breakpoints: breakpoints }));
     }
-    return (React.createElement(P, __assign({ as: View }, rest), generatedLines));
+    return (React.createElement(P, __assign({ as: SkeletonAnimation }, rest), generatedLines));
 };

package/dist/esm/components/TextField/PasswordField.js

@@ -24,7 +24,7 @@ import React, { forwardRef } from 'react';
 import { Field } from '../Field';
 import { PasswordInput } from '../Input/PasswordInput';
 export var PasswordField = forwardRef(function (_a, ref) {
-    var rest = __rest(_a, []);
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (React.createElement(Field, __assign({}, rest, { ref: ref }),
-        React.createElement(PasswordInput, null)));
+        React.createElement(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

package/dist/esm/components/index.js

@@ -6,6 +6,7 @@ export * from './CTAButton';
 export * from './CTALink';
 export * from './DateField';
 export * from './Disclosure';
+export * from './Divider';
 export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,14 +14,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
-    "@storybook/react-native": "^5.3.25",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-native": "^11.5.2",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^28.1.1",
     "@types/react": "18.0.24",
-    "@types/react-native": "^0.70.6",
+    "@types/react-native": "^0.72.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-components-react-native": "^5.1.1",
@@ -29,10 +28,10 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
-    "metro-react-native-babel-preset": "^0.75.0",
+    "metro-react-native-babel-preset": "^0.76.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",
-    "react-native": "0.70.4",
+    "react-native": "0.71.8",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
@@ -44,7 +43,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0",
-    "react-native": "^0.63.3",
+    "react-native": "^0.63.3 || ^0.71.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "^13.5.0",
     "styled-components": "^5.1.3"