@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/src/components/Notification/Notification.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+const NotificationBox = styled.View(({ theme, noMargin, variant }) => {
+    return css `
+    position: relative;
+    margin-bottom: ${noMargin ? 0 : numToPx(theme.space[400])};
+    border: ${numToPx(theme.border.width.sm)} solid
+      ${theme.color.alert[variant]};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    overflow: hidden;
+  `;
+});
+export const NotificationContentBox = styled.View(({ theme }) => {
+    return css `
+    background-color: ${theme.color.surface.bright};
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[300])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${numToPx(theme.space[400])};
+  `;
+});
+export const NotificationTitleBox = styled.View(({ theme, variant, dismissible }) => {
+    const currentVariant = theme.color.alert[`${variant}Tint`];
+    return css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: ${currentVariant};
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[200])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${dismissible
+        ? numToPx(theme.space[300])
+        : numToPx(theme.space[400])};
+    min-height: 44px;
+  `;
+});
+const NotificationTitleText = styled.Text(({ theme, variant }) => {
+    const currentVariant = theme.color.alert[variant];
+    return css `
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-family: ${theme.native.font.family.bold};
+    color: ${currentVariant};
+  `;
+});
+const DismissButton = styled.TouchableOpacity(({ theme }) => {
+    return css `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    background: ${theme.button.surface.color.bg};
+    border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.link};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+  `;
+});
+const StyledIcon = styled(Icon)(({ theme }) => `
+    color: ${theme.color.surface.bright};
+  `);
+export const Notification = ({ variant = 'info', children, title, noMargin, dismissible, onDismiss, ref, ...rest }) => {
+    const [dismissed, setDismissed] = useState(false);
+    if (dismissed || (!title && !children)) {
+        return null;
+    }
+    return (_jsx(View, { ref: ref, ...rest, children: _jsxs(NotificationBox, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
+                                setDismissed(true);
+                                if (onDismiss) {
+                                    onDismiss();
+                                }
+                            }, children: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : null] }) }));
+};
+export const ErrorNotification = (props) => (_jsx(Notification, { variant: "error", ...props }));
+export const SuccessNotification = (props) => (_jsx(Notification, { variant: "success", ...props }));
+export const InfoNotification = (props) => (_jsx(Notification, { variant: "info", ...props }));
+export const WarningNotification = (props) => (_jsx(Notification, { variant: "warning", ...props }));

package/dist/src/components/Notification/index.d.ts

@@ -0,0 +1 @@
+export { ErrorNotification, InfoNotification, Notification, SuccessNotification, WarningNotification, } from './Notification';

package/dist/src/components/Notification/index.js

@@ -0,0 +1 @@
+export { ErrorNotification, InfoNotification, Notification, SuccessNotification, WarningNotification, } from './Notification';

package/dist/src/components/NumberField/NumberField.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from '../Field';
+import { InputProps } from '../Input/Input';
+type Props = Omit<FieldProps, 'children'> & InputProps;
+export declare const NumberField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/NumberField/NumberField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { NumberInput } from '../NumberInput';
+export const NumberField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(NumberInput, { ref: ref }) }));
+};

package/dist/src/components/NumberField/index.js

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

package/dist/src/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from '../Input/Input';
+declare const NumberInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+export { NumberInput };

package/dist/src/components/NumberInput/NumberInput.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const NumberInput = (props) => (_jsx(Input, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ...props }));
+export { NumberInput };

package/dist/src/components/NumberInput/index.js

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

package/dist/src/components/P/P.d.ts

@@ -0,0 +1,9 @@
+import { Text, TextProps } from 'react-native';
+type BodyCopySizes = 'sm' | 'md' | 'lg' | 'xl';
+type BodyCopyProps = TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<Text>;
+    size?: BodyCopySizes;
+};
+export declare const P: (props: BodyCopyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/P/P.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const StyledText = styled.Text(({ theme, smallAndUp, inverted, size = 'md' }) => {
+    return css `
+      font-family: ${theme.native.font.family.book};
+      font-size: ${numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      line-height: ${numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      color: ${inverted
+        ? theme.color.surface.surface
+        : theme.color.surface.onSurface};
+    `;
+});
+export const P = (props) => {
+    const breakpoints = useBreakpoint();
+    return _jsx(StyledText, { ...props, ...breakpoints });
+};

package/dist/src/components/P/index.js

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

package/dist/src/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,7 @@
+import { FieldProps } from '../Field';
+import { InputProps } from '../Input/Input';
+type Props = Omit<FieldProps, 'children'> & InputProps & {
+    hasVisibilityToggle?: boolean;
+};
+export declare const PasswordField: ({ hasVisibilityToggle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/PasswordField/PasswordField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { PasswordInput } from '../PasswordInput';
+export const PasswordField = ({ hasVisibilityToggle, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) }));
+};

package/dist/src/components/PasswordField/index.js

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

package/dist/src/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '../Input/Input';
+type Props = InputProps & {
+    hasVisibilityToggle?: boolean;
+};
+declare const PasswordInput: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export { PasswordInput };

package/dist/src/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
+const PasswordInput = (props) => {
+    const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
+    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ...props }));
+};
+export { PasswordInput };