@jetshop/ui 5.13.10-0 → 5.14.0-alpha.49df897e

package/Modal/ModalProvider.test.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import ModalProvider from './ModalProvider';
-
-xdescribe('ModalProvider', () => {
-  it('renders', () => {
-    const wrapper = shallow(<ModalProvider />);
-    expect(wrapper).toBeDefined();
-  });
-
-  it('renders its children', () => {
-    const Child = jest.fn().mockReturnValue(<div />);
-    const wrapper = shallow(
-      <ModalProvider>
-        <Child />
-      </ModalProvider>
-    );
-    expect(wrapper.find(Child).length).toBe(1);
-  });
-
-  describe("rendered Provider's `value` prop", () => {
-    it('mirrors the component state', () => {
-      const wrapper = shallow(<ModalProvider />);
-      expect(wrapper.prop('value')).toEqual(wrapper.instance().initialState);
-    });
-  });
-});
+import React from 'react';
+import ModalProvider from './ModalProvider';
+
+xdescribe('ModalProvider', () => {
+  it('renders', () => {
+    const wrapper = shallow(<ModalProvider />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('renders its children', () => {
+    const Child = jest.fn().mockReturnValue(<div />);
+    const wrapper = shallow(
+      <ModalProvider>
+        <Child />
+      </ModalProvider>
+    );
+    expect(wrapper.find(Child).length).toBe(1);
+  });
+
+  describe("rendered Provider's `value` prop", () => {
+    it('mirrors the component state', () => {
+      const wrapper = shallow(<ModalProvider />);
+      expect(wrapper.prop('value')).toEqual(wrapper.instance().initialState);
+    });
+  });
+});

package/Modal/ModalRoot.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ModalRoot: () => JSX.Element;
-export default ModalRoot;
+/// <reference types="react" />
+declare const ModalRoot: () => JSX.Element;
+export default ModalRoot;

package/Modal/ModalRoot.js

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import ModalContext from './ModalContext';
-import ReactModal from 'react-modal';
-import { styled } from 'linaria/react';
-const Cover = styled('div') `
-  position: fixed;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.2);
-`;
-Cover.displayName = 'Cover';
-const ModalRoot = () => {
-    const { modals } = React.useContext(ModalContext);
-    return (React.createElement(React.Fragment, null, modals.map((modalProps) => (React.createElement(Modal, Object.assign({ key: modalProps.modalId }, modalProps))))));
-};
-const Modal = ({ modalComponent, isOpen, modalType, hideTarget, props }) => {
-    /** Do not render anything if there is no active modal */
-    if (!isOpen)
-        return null;
-    const Component = modalComponent;
-    if (Component && isOpen && modalType === 'modal') {
-        /** A modal has been requested, from somewhere in the app  */
-        return (React.createElement(ReactModal, Object.assign({ className: props.modalStyles }, props.modalProps, { 
-            /** isOpen should always be true here, since this is only rendered when a modal is requested */
-            isOpen: true, 
-            /**
-             * react-modal requires an onRequestClose prop that takes a func to call when the modal is closed
-             * We use this to make sure the context is updated
-             */
-            onRequestClose: hideTarget }),
-            React.createElement(Component, Object.assign({ hideTarget: hideTarget }, props))));
-    }
-    if (isOpen && props.showCover) {
-        const coverStyles = props === null || props === void 0 ? void 0 : props.coverStyles;
-        /** Inject a clickable 'cover' behind flyouts */
-        return React.createElement(Cover, { onClick: hideTarget, style: coverStyles });
-    }
-    return null;
-};
-export default ModalRoot;
+import * as React from 'react';
+import ModalContext from './ModalContext';
+import ReactModal from 'react-modal';
+import { styled } from 'linaria/react';
+const Cover = styled('div') `
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.2);
+`;
+Cover.displayName = 'Cover';
+const ModalRoot = () => {
+    const { modals } = React.useContext(ModalContext);
+    return (React.createElement(React.Fragment, null, modals.map((modalProps) => (React.createElement(Modal, Object.assign({ key: modalProps.modalId }, modalProps))))));
+};
+const Modal = ({ modalComponent, isOpen, modalType, hideTarget, props }) => {
+    /** Do not render anything if there is no active modal */
+    if (!isOpen)
+        return null;
+    const Component = modalComponent;
+    if (Component && isOpen && modalType === 'modal') {
+        /** A modal has been requested, from somewhere in the app  */
+        return (React.createElement(ReactModal, Object.assign({ className: props.modalStyles }, props.modalProps, { 
+            /** isOpen should always be true here, since this is only rendered when a modal is requested */
+            isOpen: true, 
+            /**
+             * react-modal requires an onRequestClose prop that takes a func to call when the modal is closed
+             * We use this to make sure the context is updated
+             */
+            onRequestClose: hideTarget }),
+            React.createElement(Component, Object.assign({ hideTarget: hideTarget }, props))));
+    }
+    if (isOpen && props.showCover) {
+        const coverStyles = props === null || props === void 0 ? void 0 : props.coverStyles;
+        /** Inject a clickable 'cover' behind flyouts */
+        return React.createElement(Cover, { onClick: hideTarget, style: coverStyles });
+    }
+    return null;
+};
+export default ModalRoot;
 //# sourceMappingURL=ModalRoot.js.map

package/Modal/ModalRoot.test.js

@@ -1,80 +1,80 @@
-import React from 'react';
-import getComponentWithModalContext, {
-  defaultContext
-} from './__test_utils__/getComponentWithModalContext';
-
-beforeEach(() => {
-  jest.resetModules();
-});
-
-const modalRoot = getComponentWithModalContext('ModalRoot');
-
-xdescribe('ModalRoot', () => {
-  let funcAsChild = jest.fn().mockReturnValue(<div />);
-
-  it('always renders a Consumer with no children', () => {
-    const ModalRoot = modalRoot();
-    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
-    expect(wrapper.find('Consumer')).toHaveLength(1);
-    expect(wrapper.find('Consumer').children()).toHaveLength(0);
-    expect(wrapper.find('Modal')).toHaveLength(0);
-    expect(wrapper.find('Cover')).toHaveLength(0);
-  });
-
-  it('renders a `Modal` when Component, isOpen and modalType is `modal`', () => {
-    const Comp = () => <div>Component being rendered inside Modal</div>;
-    const ModalRoot = modalRoot({
-      modals: [
-        {
-          modalComponent: Comp,
-          isOpen: true,
-          modalType: 'modal'
-        }
-      ]
-    });
-    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
-    expect(wrapper.find('Modal')).toHaveLength(1);
-    expect(wrapper.text()).toContain('Component being rendered');
-  });
-
-  it('renders a `Cover` when isOpen is true, modalType is `flyout` and props.showCover is true', () => {
-    const hideTarget = jest.fn();
-
-    const ModalRoot = modalRoot({
-      modals: [
-        {
-          hideTarget: hideTarget,
-          isOpen: true,
-          modalType: 'flyout',
-          props: { showCover: true }
-        }
-      ]
-    });
-    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
-    const Cover = wrapper.find('Cover');
-
-    expect(Cover).toHaveLength(1);
-    expect(Cover.prop('onClick')).toBe(hideTarget);
-  });
-
-  it('renders multiple `Modal` when Component, isOpen and modalType is `modal`', () => {
-    const Comp = () => <div>Component being rendered inside Modal</div>;
-    const ModalRoot = modalRoot({
-      modals: [
-        {
-          modalComponent: Comp,
-          isOpen: true,
-          modalType: 'modal'
-        },
-        {
-          modalComponent: Comp,
-          isOpen: true,
-          modalType: 'modal'
-        }
-      ]
-    });
-    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
-    expect(wrapper.find('Modal')).toHaveLength(2);
-    expect(wrapper.text()).toContain('Component being rendered');
-  });
-});
+import React from 'react';
+import getComponentWithModalContext, {
+  defaultContext
+} from './__test_utils__/getComponentWithModalContext';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+const modalRoot = getComponentWithModalContext('ModalRoot');
+
+xdescribe('ModalRoot', () => {
+  let funcAsChild = jest.fn().mockReturnValue(<div />);
+
+  it('always renders a Consumer with no children', () => {
+    const ModalRoot = modalRoot();
+    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
+    expect(wrapper.find('Consumer')).toHaveLength(1);
+    expect(wrapper.find('Consumer').children()).toHaveLength(0);
+    expect(wrapper.find('Modal')).toHaveLength(0);
+    expect(wrapper.find('Cover')).toHaveLength(0);
+  });
+
+  it('renders a `Modal` when Component, isOpen and modalType is `modal`', () => {
+    const Comp = () => <div>Component being rendered inside Modal</div>;
+    const ModalRoot = modalRoot({
+      modals: [
+        {
+          modalComponent: Comp,
+          isOpen: true,
+          modalType: 'modal'
+        }
+      ]
+    });
+    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
+    expect(wrapper.find('Modal')).toHaveLength(1);
+    expect(wrapper.text()).toContain('Component being rendered');
+  });
+
+  it('renders a `Cover` when isOpen is true, modalType is `flyout` and props.showCover is true', () => {
+    const hideTarget = jest.fn();
+
+    const ModalRoot = modalRoot({
+      modals: [
+        {
+          hideTarget: hideTarget,
+          isOpen: true,
+          modalType: 'flyout',
+          props: { showCover: true }
+        }
+      ]
+    });
+    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
+    const Cover = wrapper.find('Cover');
+
+    expect(Cover).toHaveLength(1);
+    expect(Cover.prop('onClick')).toBe(hideTarget);
+  });
+
+  it('renders multiple `Modal` when Component, isOpen and modalType is `modal`', () => {
+    const Comp = () => <div>Component being rendered inside Modal</div>;
+    const ModalRoot = modalRoot({
+      modals: [
+        {
+          modalComponent: Comp,
+          isOpen: true,
+          modalType: 'modal'
+        },
+        {
+          modalComponent: Comp,
+          isOpen: true,
+          modalType: 'modal'
+        }
+      ]
+    });
+    const wrapper = mount(<ModalRoot>{funcAsChild}</ModalRoot>);
+    expect(wrapper.find('Modal')).toHaveLength(2);
+    expect(wrapper.text()).toContain('Component being rendered');
+  });
+});

package/Modal/ModalTrigger.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { ModalState } from './ModalContext';
-export declare const ModalTrigger: React.SFC<{
-    /** The React component that you would like to display inside the modal */
-    target: React.ReactNode;
-    /** Style to apply to the modal itself */
-    modalStyles?: {};
-    children: (args: Partial<ModalState>) => React.ReactNode;
-}>;
+import * as React from 'react';
+import { ModalState } from './ModalContext';
+export declare const ModalTrigger: React.SFC<{
+    /** The React component that you would like to display inside the modal */
+    target: React.ReactNode;
+    /** Style to apply to the modal itself */
+    modalStyles?: {};
+    children: (args: Partial<ModalState>) => React.ReactNode;
+}>;

package/Modal/ModalTrigger.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import ModalContext from './ModalContext';
-export const ModalTrigger = ({ target, children, modalStyles }) => {
-    return (React.createElement(ModalContext.Consumer, null, ({ showTarget, hideTarget }) => {
-        const show = () => showTarget(target, 'modal', null, { hideTarget, modalStyles });
-        return children({ showTarget: show });
-    }));
-};
+import * as React from 'react';
+import ModalContext from './ModalContext';
+export const ModalTrigger = ({ target, children, modalStyles }) => {
+    return (React.createElement(ModalContext.Consumer, null, ({ showTarget, hideTarget }) => {
+        const show = () => showTarget(target, 'modal', null, { hideTarget, modalStyles });
+        return children({ showTarget: show });
+    }));
+};
 //# sourceMappingURL=ModalTrigger.js.map

package/Modal/__test_utils__/getComponentWithModalContext.js

@@ -1,29 +1,29 @@
-export const defaultContext = {
-  modals: [],
-  showTarget: jest.fn(),
-  hideTarget: jest.fn()
-};
-
-/**
- * @param {string} targetPath Path to the component that uses the Consumer, relative to `/Modal`
- * @param {string} moduleToExport The named module to export. Assumes default if not provided.
- */
-const getComponentWithModalContext = (targetPath, moduleToExport = null) => {
-  return (context = defaultContext) => {
-    // Mock out ModalContext Consumer (used by all modals)
-    jest.doMock('../ModalContext', () => {
-      return {
-        Consumer: (props) => props.children(context)
-      };
-    });
-
-    // return the updated target module that now includes the mocked context
-    if (moduleToExport) {
-      return require(`../${targetPath}`)[moduleToExport];
-    } else {
-      return require(`../${targetPath}`).default;
-    }
-  };
-};
-
-export default getComponentWithModalContext;
+export const defaultContext = {
+  modals: [],
+  showTarget: jest.fn(),
+  hideTarget: jest.fn()
+};
+
+/**
+ * @param {string} targetPath Path to the component that uses the Consumer, relative to `/Modal`
+ * @param {string} moduleToExport The named module to export. Assumes default if not provided.
+ */
+const getComponentWithModalContext = (targetPath, moduleToExport = null) => {
+  return (context = defaultContext) => {
+    // Mock out ModalContext Consumer (used by all modals)
+    jest.doMock('../ModalContext', () => {
+      return {
+        Consumer: (props) => props.children(context)
+      };
+    });
+
+    // return the updated target module that now includes the mocked context
+    if (moduleToExport) {
+      return require(`../${targetPath}`)[moduleToExport];
+    } else {
+      return require(`../${targetPath}`).default;
+    }
+  };
+};
+
+export default getComponentWithModalContext;

package/Pagination/Pagination.d.ts

@@ -1,7 +1,7 @@
-import { PaginationBehaviourRenderProps } from '@jetshop/ui/Pagination/PaginationBehaviour';
-import * as React from 'react';
-export declare const PaginationWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    as?: React.ElementType<any>;
-}>;
-declare const Pagination: React.SFC<PaginationBehaviourRenderProps>;
-export default Pagination;
+import { PaginationBehaviourRenderProps } from '@jetshop/ui/Pagination/PaginationBehaviour';
+import * as React from 'react';
+export declare const PaginationWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+declare const Pagination: React.SFC<PaginationBehaviourRenderProps>;
+export default Pagination;

package/Pagination/Pagination.js

@@ -1,23 +1,23 @@
-import formatMessage from '@jetshop/intl';
-import { styled } from 'linaria/react';
-import * as React from 'react';
-import usePagination from './usePagination';
-export const PaginationWrapper = styled('div') `
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`;
-const Pagination = (props) => {
-    const { hasPages, totalPages, className, currentPage } = props;
-    const { prevHref, nextHref, prevOnClick, nextOnClick, isPrevDisabled, isNextDisabled } = usePagination(props);
-    return hasPages && !isNaN(totalPages) ? (React.createElement(PaginationWrapper, { className: className },
-        React.createElement("a", { href: prevHref, onClick: prevOnClick, "data-disabled": isPrevDisabled }, formatMessage('Prev')),
-        React.createElement("div", null, formatMessage(`Page {currentPage} of {totalPages}`, {
-            currentPage,
-            totalPages
-        })),
-        React.createElement("a", { href: nextHref, onClick: nextOnClick, "data-disabled": isNextDisabled }, formatMessage('Next')))) : null;
-};
-export default Pagination;
+import formatMessage from '@jetshop/intl';
+import { styled } from 'linaria/react';
+import * as React from 'react';
+import usePagination from './usePagination';
+export const PaginationWrapper = styled('div') `
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Pagination = (props) => {
+    const { hasPages, totalPages, className, currentPage } = props;
+    const { prevHref, nextHref, prevOnClick, nextOnClick, isPrevDisabled, isNextDisabled } = usePagination(props);
+    return hasPages && !isNaN(totalPages) ? (React.createElement(PaginationWrapper, { className: className },
+        React.createElement("a", { href: prevHref, onClick: prevOnClick, "data-disabled": isPrevDisabled }, formatMessage('Prev')),
+        React.createElement("div", null, formatMessage(`Page {currentPage} of {totalPages}`, {
+            currentPage,
+            totalPages
+        })),
+        React.createElement("a", { href: nextHref, onClick: nextOnClick, "data-disabled": isNextDisabled }, formatMessage('Next')))) : null;
+};
+export default Pagination;
 //# sourceMappingURL=Pagination.js.map

package/Pagination/PaginationBehaviour.d.ts

@@ -1,52 +1,52 @@
-import { PaginationState } from '@jetshop/core/components/Pagination/PaginationContext';
-import React from 'react';
-export interface PaginationProps extends PaginationState {
-    total: number;
-    children(props: PaginationBehaviourRenderProps): React.ReactNode;
-}
-export interface TotalPagesState {
-    totalPages: number;
-}
-export interface PaginationBehaviourRenderProps {
-    /** The total number of items */
-    totalItems: number;
-    /** The total number of pages */
-    totalPages: number;
-    /** The current page number */
-    currentPage: number;
-    /** Navigate to the next page */
-    nextPage: () => void;
-    /** Navigate to the previous page */
-    prevPage: () => void;
-    /** Navigate to given page number */
-    goToPage: (page: number) => void;
-    setProductsPerPage: (perPage: number) => void;
-    /** Whether the current page is the first */
-    isFirstPage: boolean;
-    /** Whether the current page is the last */
-    isLastPage: boolean;
-    /** Whether there are pages to render */
-    hasPages: boolean;
-    className?: string;
-}
-export default class PaginationBehaviour extends React.Component<PaginationProps, TotalPagesState> {
-    constructor(props: PaginationProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: PaginationProps): void;
-    setTotalPages: () => number;
-    nextPage: () => void;
-    prevPage: () => void;
-    getStateAndProps: () => {
-        totalItems: number;
-        totalPages: number;
-        currentPage: number;
-        prevPage: () => void;
-        nextPage: () => void;
-        goToPage: (page: number, options?: import("@jetshop/core/components/Pagination/PaginationContext").GoToPageOptions) => void;
-        setProductsPerPage: (perPage: number) => void;
-        isFirstPage: boolean;
-        isLastPage: boolean;
-        hasPages: boolean;
-    };
-    render(): React.ReactNode;
-}
+import { PaginationState } from '@jetshop/core/components/Pagination/PaginationContext';
+import React from 'react';
+export interface PaginationProps extends PaginationState {
+    total: number;
+    children(props: PaginationBehaviourRenderProps): React.ReactNode;
+}
+export interface TotalPagesState {
+    totalPages: number;
+}
+export interface PaginationBehaviourRenderProps {
+    /** The total number of items */
+    totalItems: number;
+    /** The total number of pages */
+    totalPages: number;
+    /** The current page number */
+    currentPage: number;
+    /** Navigate to the next page */
+    nextPage: () => void;
+    /** Navigate to the previous page */
+    prevPage: () => void;
+    /** Navigate to given page number */
+    goToPage: (page: number) => void;
+    setProductsPerPage: (perPage: number) => void;
+    /** Whether the current page is the first */
+    isFirstPage: boolean;
+    /** Whether the current page is the last */
+    isLastPage: boolean;
+    /** Whether there are pages to render */
+    hasPages: boolean;
+    className?: string;
+}
+export default class PaginationBehaviour extends React.Component<PaginationProps, TotalPagesState> {
+    constructor(props: PaginationProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PaginationProps): void;
+    setTotalPages: () => number;
+    nextPage: () => void;
+    prevPage: () => void;
+    getStateAndProps: () => {
+        totalItems: number;
+        totalPages: number;
+        currentPage: number;
+        prevPage: () => void;
+        nextPage: () => void;
+        goToPage: (page: number, options?: import("@jetshop/core/components/Pagination/PaginationContext").GoToPageOptions) => void;
+        setProductsPerPage: (perPage: number) => void;
+        isFirstPage: boolean;
+        isLastPage: boolean;
+        hasPages: boolean;
+    };
+    render(): React.ReactNode;
+}