@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/EmptyState/EmptyState.test.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../test/utils");
+const EmptyState_1 = require("./EmptyState");
+jest.mock('../../providers', () => (Object.assign(Object.assign({}, jest.requireActual('../../providers')), { usePictograms: () => ({
+        'test-pictogram': 'test-pictogram-data',
+    }) })));
+const mockIllustration = {
+    uri: 'https://example.com/image.png',
+    width: 100,
+    height: 100,
+};
+const setup = (props) => {
+    return (0, utils_1.render)((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, Object.assign({}, props)));
+};
+describe('EmptyState', () => {
+    it('should render the heading and children', () => {
+        const { getByText } = setup({
+            heading: 'Default Heading',
+            children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Default Children" }),
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByText('Default Heading')).toBeDefined();
+        expect(getByText('Default Children')).toBeDefined();
+    });
+    it('should have a filled background by default', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).not.toBe('transparent');
+    });
+    it("should have a transparent background when backgroundStyle is 'transparent'", () => {
+        const { getByTestId } = setup({
+            backgroundStyle: 'transparent',
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).toBe('transparent');
+    });
+    it('should render an illustration if provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+        });
+        const image = getByTestId('empty-state-illustration');
+        expect(image).toBeDefined();
+        expect(image.props.source.uri).toBe(mockIllustration.uri);
+    });
+    it('should not render an illustration if uri is not provided', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            // @ts-expect-error - we are intentionally providing an illustration without a valid uri to test rendering logic
+            illustration: { height: 100, width: 100 },
+        });
+        expect(queryByTestId('empty-state-illustration')).toBeNull();
+    });
+    it('should render a pictogram if a valid pictogramName is provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-pictogram')).toBeDefined();
+    });
+    it('should not render a pictogram if pictogramName is invalid', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'invalid-pictogram',
+        });
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+    it('should render custom children', () => {
+        const { getByText } = (0, utils_1.render)((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { heading: "Custom Heading", pictogramName: "test-pictogram", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "My Custom Child" }) }));
+        expect(getByText('My Custom Child')).toBeDefined();
+    });
+    it('should only render illustration when both illustration and pictogramName are provided', () => {
+        // According to the EmptyStateProps, only one of them should be present.
+        // However, if a user passes both, the component's internal logic will prioritize illustration.
+        // @ts-expect-error - we are intentionally passing both props to test runtime behavior
+        const { getByTestId, queryByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-illustration')).toBeDefined();
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+});

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./EmptyState"), exports);

package/dist/components/EmptyState/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledCard: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, onSelect, ...rest }: import("../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

package/dist/components/EmptyState/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContainer = exports.StyledCard = void 0;
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const Card_1 = require("../Card");
+exports.StyledCard = (0, styled_native_1.default)(Card_1.Card)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space[100],
+}));
+exports.TextContainer = styled_native_1.default.View(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    gap: theme.space[50],
+    paddingLeft: theme.space[400],
+    paddingRight: theme.space[400],
+    alignItems: 'center',
+}));

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { PictogramNameExtended } from '../../providers';
+import { RemoteImageProps } from '../RemoteImage';
+export type BackgroundType = 'filled' | 'transparent';
+type WithPictogram = {
+    illustration?: never;
+    pictogramName: PictogramNameExtended;
+};
+type WithIllustration = {
+    illustration: RemoteImageProps;
+    pictogramName?: never;
+};
+export type EmptyStateProps = (WithPictogram | WithIllustration) & {
+    backgroundStyle?: BackgroundType;
+    heading: string;
+    children?: ReactNode;
+};
+export {};

package/dist/components/EmptyState/types.js

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