@ovotech/element-native 5.5.0 → 5.6.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;