@ovotech/element-native 5.5.0 → 5.6.0

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;