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

package/Accordion/Accordion.d.ts

@@ -1,33 +1,33 @@
-import * as React from 'react';
-export interface AccordionChildProps {
-    openIndexes: number[];
-    handleClick(index: number): void;
-    AccordionContent: any;
-}
-export interface AccordionProps {
-    children: (args: AccordionChildProps) => React.ReactNode;
-    /** If true, only one accordion item can be open at any time */
-    single?: boolean;
-    /** If true, at least one accordion item will always be open */
-    atLeastOne?: boolean;
-    initialOpenIndexes?: number[];
-}
-export interface AccordionState {
-    openIndexes: number[];
-}
-/**
- * A component that can be optionally used as the accordion's content to
- * automatically apply open animations.
- */
-export declare const AccordionContent: React.SFC<{
-    isOpen: boolean;
-}>;
-export default class Accordion extends React.Component<AccordionProps, AccordionState> {
-    readonly state: {
-        openIndexes: number[];
-    };
-    close: (index: number) => void;
-    open: (index: number) => void;
-    handleItemClick: (index: number) => void;
-    render(): React.ReactNode;
-}
+import * as React from 'react';
+export interface AccordionChildProps {
+    openIndexes: number[];
+    handleClick(index: number): void;
+    AccordionContent: any;
+}
+export interface AccordionProps {
+    children: (args: AccordionChildProps) => React.ReactNode;
+    /** If true, only one accordion item can be open at any time */
+    single?: boolean;
+    /** If true, at least one accordion item will always be open */
+    atLeastOne?: boolean;
+    initialOpenIndexes?: number[];
+}
+export interface AccordionState {
+    openIndexes: number[];
+}
+/**
+ * A component that can be optionally used as the accordion's content to
+ * automatically apply open animations.
+ */
+export declare const AccordionContent: React.SFC<{
+    isOpen: boolean;
+}>;
+export default class Accordion extends React.Component<AccordionProps, AccordionState> {
+    readonly state: {
+        openIndexes: number[];
+    };
+    close: (index: number) => void;
+    open: (index: number) => void;
+    handleItemClick: (index: number) => void;
+    render(): React.ReactNode;
+}

package/Accordion/Accordion.js

@@ -1,59 +1,59 @@
-import * as React from 'react';
-import AnimateHeight from 'react-animate-height';
-/**
- * A component that can be optionally used as the accordion's content to
- * automatically apply open animations.
- */
-export const AccordionContent = props => {
-    return (React.createElement(AnimateHeight, { height: props.isOpen ? 'auto' : 0 }, props.children || React.createElement(React.Fragment, null)));
-};
-export default class Accordion extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            openIndexes: (this.props.initialOpenIndexes || [this.props.atLeastOne && 0]).filter(el => isFinite(el))
-        };
-        this.close = (index) => {
-            this.setState(prevState => {
-                const openCount = prevState.openIndexes.length;
-                return {
-                    openIndexes: this.props.atLeastOne &&
-                        openCount === 1 &&
-                        prevState.openIndexes.includes(index)
-                        ? prevState.openIndexes
-                        : prevState.openIndexes.filter(i => i !== index)
-                };
-            });
-        };
-        this.open = (index) => {
-            this.setState(prevState => {
-                const openIndexes = this.props.single
-                    ? [index]
-                    : [...prevState.openIndexes, index];
-                return {
-                    openIndexes
-                };
-            });
-        };
-        this.handleItemClick = (index) => {
-            // Determine whether we are closing or opening this accordion item
-            const action = this.state.openIndexes.includes(index)
-                ? 'closing'
-                : 'opening';
-            if (action === 'closing') {
-                this.close(index);
-            }
-            else {
-                this.open(index);
-            }
-        };
-    }
-    render() {
-        return this.props.children({
-            openIndexes: this.state.openIndexes,
-            handleClick: this.handleItemClick,
-            AccordionContent
-        });
-    }
-}
+import * as React from 'react';
+import AnimateHeight from 'react-animate-height';
+/**
+ * A component that can be optionally used as the accordion's content to
+ * automatically apply open animations.
+ */
+export const AccordionContent = props => {
+    return (React.createElement(AnimateHeight, { height: props.isOpen ? 'auto' : 0 }, props.children || React.createElement(React.Fragment, null)));
+};
+export default class Accordion extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            openIndexes: (this.props.initialOpenIndexes || [this.props.atLeastOne && 0]).filter(el => isFinite(el))
+        };
+        this.close = (index) => {
+            this.setState(prevState => {
+                const openCount = prevState.openIndexes.length;
+                return {
+                    openIndexes: this.props.atLeastOne &&
+                        openCount === 1 &&
+                        prevState.openIndexes.includes(index)
+                        ? prevState.openIndexes
+                        : prevState.openIndexes.filter(i => i !== index)
+                };
+            });
+        };
+        this.open = (index) => {
+            this.setState(prevState => {
+                const openIndexes = this.props.single
+                    ? [index]
+                    : [...prevState.openIndexes, index];
+                return {
+                    openIndexes
+                };
+            });
+        };
+        this.handleItemClick = (index) => {
+            // Determine whether we are closing or opening this accordion item
+            const action = this.state.openIndexes.includes(index)
+                ? 'closing'
+                : 'opening';
+            if (action === 'closing') {
+                this.close(index);
+            }
+            else {
+                this.open(index);
+            }
+        };
+    }
+    render() {
+        return this.props.children({
+            openIndexes: this.state.openIndexes,
+            handleClick: this.handleItemClick,
+            AccordionContent
+        });
+    }
+}
 //# sourceMappingURL=Accordion.js.map

package/Accordion/Accordion.test.js

@@ -1,73 +1,73 @@
-import { render, fireEvent } from '@testing-library/react';
-import React from 'react';
-import Accordion from './Accordion';
-
-const accordionSegmentsToRender = 2;
-const headerText = counter => `Accordion ${counter} heading`;
-const bodyText = counter => `Accordion ${counter} body`;
-
-describe('Accordion', () => {
-  it('renders child as fn with args', () => {
-    const { renderArg } = setup();
-    expect(renderArg).toMatchSnapshot();
-  });
-
-  it('renders the accordion headers', () => {
-    const { getAllByText } = setup();
-    expect(getAllByText(/heading/)).toHaveLength(2);
-  });
-
-  it('does not render accordion bodies', () => {
-    const { queryAllByText } = setup();
-    expect(queryAllByText(/body/)).toHaveLength(0);
-  });
-
-  it('toggles a body when related header is clicked', () => {
-    const { getByText } = setup();
-    const header = getByText(headerText(0));
-    fireEvent.click(header);
-    const body = getByText(bodyText(0));
-    expect(body).toBeInTheDocument();
-
-    // Now check it will close
-    fireEvent.click(header);
-    expect(body).not.toBeInTheDocument();
-  });
-
-  it('renders one body when passed atLeastOne prop', () => {
-    const { getAllByText } = setup({ accordionProps: { atLeastOne: true } });
-    expect(getAllByText(/body/)).toHaveLength(1);
-  });
-});
-
-function setup({ accordionProps } = {}) {
-  let renderArg;
-
-  const childrenSpy = jest.fn(controllerArg => {
-    renderArg = controllerArg;
-
-    return (
-      <div>
-        {/* Render 2 accordion head + body segments */}
-        {Array(accordionSegmentsToRender)
-          .fill(0)
-          .map((_, index) => (
-            <div key={index}>
-              <h1 onClick={() => controllerArg.handleClick(index)}>
-                {headerText(index)}
-              </h1>
-              {controllerArg.openIndexes.includes(index) && (
-                <p>{bodyText(index)}</p>
-              )}
-            </div>
-          ))}
-      </div>
-    );
-  });
-
-  const utils = render(
-    <Accordion {...accordionProps}>{childrenSpy}</Accordion>
-  );
-
-  return { ...utils, childrenSpy, renderArg };
-}
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import Accordion from './Accordion';
+
+const accordionSegmentsToRender = 2;
+const headerText = counter => `Accordion ${counter} heading`;
+const bodyText = counter => `Accordion ${counter} body`;
+
+describe('Accordion', () => {
+  it('renders child as fn with args', () => {
+    const { renderArg } = setup();
+    expect(renderArg).toMatchSnapshot();
+  });
+
+  it('renders the accordion headers', () => {
+    const { getAllByText } = setup();
+    expect(getAllByText(/heading/)).toHaveLength(2);
+  });
+
+  it('does not render accordion bodies', () => {
+    const { queryAllByText } = setup();
+    expect(queryAllByText(/body/)).toHaveLength(0);
+  });
+
+  it('toggles a body when related header is clicked', () => {
+    const { getByText } = setup();
+    const header = getByText(headerText(0));
+    fireEvent.click(header);
+    const body = getByText(bodyText(0));
+    expect(body).toBeInTheDocument();
+
+    // Now check it will close
+    fireEvent.click(header);
+    expect(body).not.toBeInTheDocument();
+  });
+
+  it('renders one body when passed atLeastOne prop', () => {
+    const { getAllByText } = setup({ accordionProps: { atLeastOne: true } });
+    expect(getAllByText(/body/)).toHaveLength(1);
+  });
+});
+
+function setup({ accordionProps } = {}) {
+  let renderArg;
+
+  const childrenSpy = jest.fn(controllerArg => {
+    renderArg = controllerArg;
+
+    return (
+      <div>
+        {/* Render 2 accordion head + body segments */}
+        {Array(accordionSegmentsToRender)
+          .fill(0)
+          .map((_, index) => (
+            <div key={index}>
+              <h1 onClick={() => controllerArg.handleClick(index)}>
+                {headerText(index)}
+              </h1>
+              {controllerArg.openIndexes.includes(index) && (
+                <p>{bodyText(index)}</p>
+              )}
+            </div>
+          ))}
+      </div>
+    );
+  });
+
+  const utils = render(
+    <Accordion {...accordionProps}>{childrenSpy}</Accordion>
+  );
+
+  return { ...utils, childrenSpy, renderArg };
+}

package/Accordion/__doc_utils__/AccordionHeader.js

@@ -1,12 +1,12 @@
-import { styled } from 'linaria/react';
-
-export const Header = styled('h2')`
-  background: antiquewhite;
-  cursor: pointer;
-  padding: 1rem;
-  user-select: none;
-  color: coral;
-  margin: 0;
-  font-size: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-`;
+import { styled } from 'linaria/react';
+
+export const Header = styled('h2')`
+  background: antiquewhite;
+  cursor: pointer;
+  padding: 1rem;
+  user-select: none;
+  color: coral;
+  margin: 0;
+  font-size: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+`;

package/Auth/FormFields/CountriesInput.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import { Country } from '@jetshop/core/types';
-interface CountriesProps {
-    onChange?(e: React.FormEvent<HTMLSelectElement>): any;
-    onFocus?(e: React.FormEvent<HTMLSelectElement>): any;
-    countries: Country[];
-    name: string;
-    id?: string;
-}
-/**
- * Maps over the current channel's countries and displays them.
- */
-export declare function CountriesInput({ id, name, onChange, onFocus, countries, ...rest }: CountriesProps): JSX.Element;
-export {};
+import React from 'react';
+import { Country } from '@jetshop/core/types';
+interface CountriesProps {
+    onChange?(e: React.FormEvent<HTMLSelectElement>): any;
+    onFocus?(e: React.FormEvent<HTMLSelectElement>): any;
+    countries: Country[];
+    name: string;
+    id?: string;
+}
+/**
+ * Maps over the current channel's countries and displays them.
+ */
+export declare function CountriesInput({ id, name, onChange, onFocus, countries, ...rest }: CountriesProps): JSX.Element;
+export {};

package/Auth/FormFields/CountriesInput.js

@@ -1,28 +1,28 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Field } from 'formik';
-import React from 'react';
-/**
- * Maps over the current channel's countries and displays them.
- */
-export function CountriesInput(_a) {
-    var { id, name, onChange, onFocus, countries } = _a, rest = __rest(_a, ["id", "name", "onChange", "onFocus", "countries"]);
-    return (React.createElement(Field, Object.assign({ name: name, onFocus: onFocus }, rest, { render: ({ field }) => {
-            return (React.createElement("select", Object.assign({ id: id || name }, rest, field, { onChange: e => {
-                    field.onChange(e);
-                    onChange && onChange(e);
-                } }),
-                countries.map(country => (React.createElement("option", { key: country.code, value: country.code }, country.name))),
-                ";"));
-        } })));
-}
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Field } from 'formik';
+import React from 'react';
+/**
+ * Maps over the current channel's countries and displays them.
+ */
+export function CountriesInput(_a) {
+    var { id, name, onChange, onFocus, countries } = _a, rest = __rest(_a, ["id", "name", "onChange", "onFocus", "countries"]);
+    return (React.createElement(Field, Object.assign({ name: name, onFocus: onFocus }, rest, { render: ({ field }) => {
+            return (React.createElement("select", Object.assign({ id: id || name }, rest, field, { onChange: e => {
+                    field.onChange(e);
+                    onChange && onChange(e);
+                } }),
+                countries.map(country => (React.createElement("option", { key: country.code, value: country.code }, country.name))),
+                ";"));
+        } })));
+}
 //# sourceMappingURL=CountriesInput.js.map

package/Auth/LogInBehavior.d.ts

@@ -1,22 +1,22 @@
-import { Component, FormEvent, ReactNode } from 'react';
-export interface LogInState {
-    email: string;
-    password: string;
-}
-export interface LogInBehaviorProps {
-    children: (value: {
-        onSubmit: (email: string, password: string, login: any) => void;
-        updateEmail: (event: FormEvent<HTMLInputElement>) => void;
-        updatePassword: (event: FormEvent<HTMLInputElement>) => void;
-    } & LogInState) => ReactNode;
-}
-export default class LogInBehavior extends Component<LogInBehaviorProps, LogInState> {
-    state: {
-        email: string;
-        password: string;
-    };
-    onSubmit: (email: string, password: string, login: any) => void;
-    updateEmail: (event: FormEvent<HTMLInputElement>) => void;
-    updatePassword: (event: FormEvent<HTMLInputElement>) => void;
-    render(): ReactNode;
-}
+import { Component, FormEvent, ReactNode } from 'react';
+export interface LogInState {
+    email: string;
+    password: string;
+}
+export interface LogInBehaviorProps {
+    children: (value: {
+        onSubmit: (email: string, password: string, login: any) => void;
+        updateEmail: (event: FormEvent<HTMLInputElement>) => void;
+        updatePassword: (event: FormEvent<HTMLInputElement>) => void;
+    } & LogInState) => ReactNode;
+}
+export default class LogInBehavior extends Component<LogInBehaviorProps, LogInState> {
+    state: {
+        email: string;
+        password: string;
+    };
+    onSubmit: (email: string, password: string, login: any) => void;
+    updateEmail: (event: FormEvent<HTMLInputElement>) => void;
+    updatePassword: (event: FormEvent<HTMLInputElement>) => void;
+    render(): ReactNode;
+}

package/Auth/LogInBehavior.js

@@ -1,24 +1,24 @@
-import { Component } from 'react';
-export default class LogInBehavior extends Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            email: '',
-            password: ''
-        };
-        this.onSubmit = (email, password, login) => {
-            login(email, password);
-        };
-        this.updateEmail = (event) => this.setState({
-            email: event.currentTarget.value
-        });
-        this.updatePassword = (event) => this.setState({
-            password: event.currentTarget.value
-        });
-    }
-    render() {
-        const { children } = this.props;
-        return children(Object.assign(Object.assign({}, this.state), { onSubmit: this.onSubmit, updateEmail: this.updateEmail, updatePassword: this.updatePassword }));
-    }
-}
+import { Component } from 'react';
+export default class LogInBehavior extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            email: '',
+            password: ''
+        };
+        this.onSubmit = (email, password, login) => {
+            login(email, password);
+        };
+        this.updateEmail = (event) => this.setState({
+            email: event.currentTarget.value
+        });
+        this.updatePassword = (event) => this.setState({
+            password: event.currentTarget.value
+        });
+    }
+    render() {
+        const { children } = this.props;
+        return children(Object.assign(Object.assign({}, this.state), { onSubmit: this.onSubmit, updateEmail: this.updateEmail, updatePassword: this.updatePassword }));
+    }
+}
 //# sourceMappingURL=LogInBehavior.js.map

package/Auth/LogInFormProvider.d.ts

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-declare const LogInFormProvider: FC<{
-    children: (props: any) => React.ReactNode;
-    redirect?: string;
-    initialEmail?: string;
-}>;
-export default LogInFormProvider;
+import React, { FC } from 'react';
+declare const LogInFormProvider: FC<{
+    children: (props: any) => React.ReactNode;
+    redirect?: string;
+    initialEmail?: string;
+}>;
+export default LogInFormProvider;