@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Cards/shared.styles.js

@@ -3,13 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WrappedContainer = exports.ContainerWithGap = exports.HeadingContainer = exports.CardWithMinHeight = exports.CardBadge = exports.SMALL_CARD_HEIGHT = void 0;
+exports.SmallCardContainer = exports.StyleWrapper = exports.WrappedContainer = exports.ContainerWithGap = exports.HeadingContainer = exports.CardWithMinHeight = exports.TitleContainer = exports.StyledBadge = exports.BadgeContainer = exports.SMALL_CARD_HEIGHT = void 0;
 const react_native_1 = require("react-native");
 const styled_native_1 = __importDefault(require("../../styled.native"));
 const Badge_1 = require("../Badge");
 const Card_1 = require("../Card");
 exports.SMALL_CARD_HEIGHT = 172;
-exports.CardBadge = (0, styled_native_1.default)(Badge_1.Badge)(({ theme }) => ({
+exports.BadgeContainer = (0, styled_native_1.default)(react_native_1.View)({
+    position: 'relative',
+});
+exports.StyledBadge = (0, styled_native_1.default)(Badge_1.Badge)(({ theme }) => ({
     position: 'absolute',
     top: theme.space[100],
     left: theme.space[500],
@@ -22,6 +25,11 @@ exports.CardBadge = (0, styled_native_1.default)(Badge_1.Badge)(({ theme }) => (
     paddingTop: 0,
     zIndex: 1,
 }));
+exports.TitleContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    marginRight: theme.space[50],
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+}));
 exports.CardWithMinHeight = (0, styled_native_1.default)(Card_1.Card)(({ isSmall }) => ({
     minHeight: isSmall ? exports.SMALL_CARD_HEIGHT : undefined,
 }));
@@ -37,3 +45,11 @@ exports.WrappedContainer = (0, styled_native_1.default)(react_native_1.View)(({
     flexWrap: 'wrap',
     gap: theme.space[100],
 }));
+// Styles for stories
+exports.StyleWrapper = styled_native_1.default.View({
+    padding: 10,
+    gap: 15,
+});
+exports.SmallCardContainer = styled_native_1.default.View({
+    maxWidth: 180,
+});

package/dist/components/Cards/utils.d.ts

@@ -1,3 +1,4 @@
 import { ColorKey } from './types';
 export declare const checkIsSmall: (size?: "default" | "small") => boolean;
 export declare const resolveColor: (colorKey?: ColorKey) => string;
+export declare const handlePress: () => void;

package/dist/components/Cards/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveColor = exports.checkIsSmall = void 0;
+exports.handlePress = exports.resolveColor = exports.checkIsSmall = void 0;
+const react_native_1 = require("react-native");
 const styled_native_1 = require("../../styled.native");
 const checkIsSmall = (size) => size === 'small';
 exports.checkIsSmall = checkIsSmall;
@@ -12,6 +13,17 @@ const resolveColor = (colorKey = 'default') => {
     if (colorKey === 'onSurface') {
         return theme.color.surface.onSurface;
     }
+    if (colorKey === 'brandBold') {
+        return theme.color.brand.bold;
+    }
+    if (colorKey === 'onBrand') {
+        return theme.color.brand.onBrand;
+    }
     return colorKey;
 };
 exports.resolveColor = resolveColor;
+// Used for stories
+const handlePress = () => {
+    react_native_1.Alert.alert('Card pressed');
+};
+exports.handlePress = handlePress;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,14 +1,3 @@
-import { ReactNode } from 'react';
-import { TouchableOpacityProps, View } from 'react-native';
-type Props = Omit<TouchableOpacityProps, 'children'> & {
-    label: string;
-    checked: boolean;
-    hint?: ReactNode;
-    error?: ReactNode;
-    optional?: boolean;
-    invalid?: boolean;
-    activeOpacity?: number;
-    ref?: React.RefObject<View>;
-};
-declare const Checkbox: ({ label, hint, error, checked, optional, invalid, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+import { CheckboxProps } from './types';
+declare const Checkbox: ({ label, hint, error, checked, optional, invalid, activeOpacity, testID, ref, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -10,68 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
-const styled_native_1 = __importDefault(require("../../styled.native"));
 const ErrorText_1 = require("../ErrorText");
 const FormGroup_1 = require("../FormGroup");
 const HintText_1 = require("../HintText");
-const Icon_1 = require("../Icon/Icon");
-const LabelText_1 = require("../LabelText");
 const Stack_1 = require("../Stack");
-const StyledCheckboxInputWrapper = styled_native_1.default.View(({ theme }) => {
-    const checkboxSize = theme.space[600];
-    const gap = theme.space[200];
-    return `
-      width: ${(0, element_core_1.numToPx)(checkboxSize + gap)};
-      height: ${(0, element_core_1.numToPx)(theme.space[1100])};
-    `;
-});
-const StyledCheckboxInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-      margin-top: 10px;
-      border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.xs)};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const CheckboxCheck = (props) => {
-    return (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ name: "check", size: 16 }, props));
-};
-const StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(({ theme, checked, }) => {
-    return `
-      margin-top: ${(0, element_core_1.numToPx)(theme.space[50])};
-      margin-left: ${(0, element_core_1.numToPx)(theme.space[50])};
-      color: ${theme.color.alert.info};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+const styled_1 = require("./styled");
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(StyledCheckboxInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledCheckboxInputCheck, { checked: checked }) }) })));
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledCheckboxInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(styled_1.StyledCheckboxInputCheck, { checked: checked }) }) })));
 };
-const CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(({ theme }) => `
-    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
-  `);
-const StyledWrapper = styled_native_1.default.View `
-  flex-direction: row;
-`;
 const Checkbox = (_a) => {
     var { label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID", "ref"]);
     const hasError = !!error;
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsxs)(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(styled_1.StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsxs)(styled_1.CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) }))] }) }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/Checkbox/styled.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { Icon } from '../Icon';
+export declare const StyledCheckboxInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StyledCheckboxInput: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    invalid?: boolean;
+    checked?: boolean;
+}, never>;
+export declare const StyledCheckboxInputCheck: import("styled-components").StyledComponent<(props: Omit<ComponentProps<typeof Icon>, "name" | "size">) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {
+    checked?: boolean;
+}, never>;
+export declare const CheckLabelText: import("styled-components").StyledComponent<(props: Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@ovotech/element-core").ThemeNative | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../..").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {}, never>;

package/dist/components/Checkbox/styled.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledWrapper = exports.CheckLabelText = exports.StyledCheckboxInputCheck = exports.StyledCheckboxInput = exports.StyledCheckboxInputWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const Icon_1 = require("../Icon");
+const LabelText_1 = require("../LabelText");
+const CheckboxCheck = (props) => {
+    return (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ name: "check", size: 16 }, props));
+};
+exports.StyledCheckboxInputWrapper = styled_native_1.default.View(({ theme }) => {
+    const checkboxSize = theme.space[600];
+    const gap = theme.space[200];
+    return `
+      width: ${(0, element_core_1.numToPx)(checkboxSize + gap)};
+      height: ${(0, element_core_1.numToPx)(theme.space[1100])};
+    `;
+});
+exports.StyledCheckboxInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+      margin-top: 10px;
+      border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.xs)};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+exports.StyledCheckboxInputCheck = (0, styled_native_1.default)(CheckboxCheck)(({ theme, checked }) => {
+    return `
+      margin-top: ${(0, element_core_1.numToPx)(theme.space[50])};
+      margin-left: ${(0, element_core_1.numToPx)(theme.space[50])};
+      color: ${theme.color.alert.info};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+exports.CheckLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(({ theme }) => `
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
+    font-family: ${theme.native.font.family.book};
+  `);
+exports.StyledWrapper = styled_native_1.default.View `
+  flex-direction: row;
+`;

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { TouchableOpacityProps, View, ViewProps } from 'react-native';
+export type InputProps = ViewProps & {
+    checked?: boolean;
+    invalid?: boolean;
+};
+export type CheckboxProps = Omit<TouchableOpacityProps, 'children'> & {
+    label: string;
+    checked: boolean;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+    invalid?: boolean;
+    activeOpacity?: number;
+    ref?: React.RefObject<View>;
+};

package/dist/components/Checkbox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,7 +1,8 @@
 import { type TextInput as RNTextInput } from 'react-native';
 import { InputProps } from '../Input/Input';
+type Currency = 'GBP' | 'EUR' | 'AUD' | 'USD';
 export type CurrencyInputProps = InputProps & {
-    currency?: 'GBP' | 'EUR' | 'AUD' | 'USD';
+    currency?: Currency;
     ref?: React.Ref<RNTextInput>;
 };
 declare const CurrencyInput: ({ currency, invalid, accessibilityLabel, ref, ...rest }: CurrencyInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrencyInput/CurrencyInput.js

@@ -14,13 +14,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrencyInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
-const NumberInput_1 = require("../NumberInput");
+const styled_1 = require("./styled");
+const currecySymbolMap = {
+    GBP: '£',
+    EUR: '€',
+    AUD: '$',
+    USD: '$',
+};
 const CurrencyInput = (_a) => {
     var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
     const inputRef = (0, react_1.createRef)();
-    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
-    const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: (0, utils_1.mergeRefs)(ref, inputRef) }, rest)));
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euros' : 'dollars'}`.trim();
+    return ((0, jsx_runtime_1.jsxs)(styled_1.CurrencyInputWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledCurrencyInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, ref: (0, utils_1.mergeRefs)(ref, inputRef) }, breakpoints, rest)), (0, jsx_runtime_1.jsx)(styled_1.StyledCurrencySymbolWrapper, { testID: `element-currency-input-${currency}`, accessible: false, children: (0, jsx_runtime_1.jsx)(styled_1.StyledCurrencySymbol, Object.assign({}, breakpoints, { children: currecySymbolMap[currency] })) })] }));
 };
 exports.CurrencyInput = CurrencyInput;

package/dist/components/CurrencyInput/styled.d.ts

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+import { Breakpoints } from '../../hooks';
+export declare const CurrencyInputWrapper: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const StyledCurrencyInput: import("styled-components").StyledComponent<(props: import("../Input/Input").InputProps) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, Breakpoints, never>;
+export declare const StyledCurrencySymbolWrapper: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const StyledCurrencySymbol: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, Breakpoints, never>;

package/dist/components/CurrencyInput/styled.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCurrencySymbol = exports.StyledCurrencySymbolWrapper = exports.StyledCurrencyInput = exports.CurrencyInputWrapper = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const NumberInput_1 = require("../NumberInput");
+const P_1 = require("../P");
+exports.CurrencyInputWrapper = (0, styled_native_1.default)(react_native_1.View) `
+  position: relative;
+`;
+exports.StyledCurrencyInput = (0, styled_native_1.default)(NumberInput_1.NumberInput)(({ theme, smallAndUp }) => `
+  padding-left: ${(0, theme_1.numToPx)(theme.space[800])};
+  padding-bottom: ${(0, theme_1.numToPx)(theme.space[100])};
+  font-family: ${theme.native.font.family.black};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  letter-spacing: ${(0, theme_1.numToPx)(theme.font.letterSpacing['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`);
+exports.StyledCurrencySymbolWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return `
+  position: absolute;
+  width: ${(0, theme_1.numToPx)(theme.space[700])};
+  height: ${(0, theme_1.numToPx)(theme.space[700])};
+  top: 50%;
+  margin-top: -${(0, theme_1.numToPx)(theme.space[350])};
+  left: ${(0, theme_1.numToPx)(theme.space[400])};
+`;
+});
+exports.StyledCurrencySymbol = (0, styled_native_1.default)(P_1.P)(({ theme, smallAndUp, }) => {
+    return `
+  font-family: ${theme.native.font.family.bold};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`;
+});