@jetshop/ui 5.13.12-0 → 5.14.0

package/ChannelSelector/ChannelSelector.d.ts

@@ -1,63 +1,63 @@
-import { SelectedChannel } from '@jetshop/core/components/ChannelContext/ChannelContext';
-import { Channel } from '@jetshop/core/types';
-import { Item } from '@jetshop/ui/Checkbox/CheckboxGroup';
-import React from 'react';
-export interface RenderCallback {
-    (props: {
-        channels: Channel[];
-        currencyItems: Item[];
-        languageItems: Item[];
-        selectedChannel: SelectedChannel;
-        hasChanged: boolean;
-        onSelect: SelectChannel;
-        onCurrencySelect: (currency: string) => void;
-        onLanguageSelect: (language: string) => void;
-    }): React.ReactElement<any>;
-}
-export interface ChannelSelectorProps {
-    /** Any array of channels to display */
-    channels: Channel[];
-    /** The default-selected channel */
-    initialChannel: SelectedChannel;
-    /**
-     * Render callback to pass state to composed child components
-     * @param {arr} channels
-     * @param {arr} currencyItems
-     * @param {arr} languageItems
-     * @param {obj} selectedChannel selected channel
-     * @param {boolean} hasChanged Whether the selection has changed from the default
-     * @param {func} onSelect Call with the channel to set the selected channel
-     * @param {func} onCurrencySelect Call with the currency to set the selected currnecy
-     * @param {func} onLanguageSelect Call with the language to set the selected lanauge
-     */
-    render: RenderCallback;
-}
-export interface ChannelSelectorState {
-    selectedChannel: SelectedChannel;
-    hasChanged: boolean;
-}
-export declare type SelectChannel = (channel: number | string, culture?: string, currency?: string, country?: string) => void;
-export declare type SelectCurrency = (currency: string) => void;
-export declare type SelectLanguage = (language: string) => void;
-/** Wraps either MiniSelector or LargeSelector and provides controlled state */
-export default class ChannelSelector extends React.Component<ChannelSelectorProps, ChannelSelectorState> {
-    state: {
-        selectedChannel: SelectedChannel;
-        hasChanged: boolean;
-    };
-    setDirtyState: () => void;
-    componentDidUpdate(_prevProps: any, prevState: any): void;
-    selectChannel: SelectChannel;
-    selectCurrency: SelectCurrency;
-    selectLanguage: SelectLanguage;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-}
-export declare const LangCurrWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    as?: React.ElementType<any>;
-}>;
-export declare const SelectorBody: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
-    as?: React.ElementType<any>;
-}>;
-export declare const Title: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
-    as?: React.ElementType<any>;
-}>;
+import { SelectedChannel } from '@jetshop/core/components/ChannelContext/ChannelContext';
+import { Channel } from '@jetshop/core/types';
+import { Item } from '@jetshop/ui/Checkbox/CheckboxGroup';
+import React from 'react';
+export interface RenderCallback {
+    (props: {
+        channels: Channel[];
+        currencyItems: Item[];
+        languageItems: Item[];
+        selectedChannel: SelectedChannel;
+        hasChanged: boolean;
+        onSelect: SelectChannel;
+        onCurrencySelect: (currency: string) => void;
+        onLanguageSelect: (language: string) => void;
+    }): React.ReactElement<any>;
+}
+export interface ChannelSelectorProps {
+    /** Any array of channels to display */
+    channels: Channel[];
+    /** The default-selected channel */
+    initialChannel: SelectedChannel;
+    /**
+     * Render callback to pass state to composed child components
+     * @param {arr} channels
+     * @param {arr} currencyItems
+     * @param {arr} languageItems
+     * @param {obj} selectedChannel selected channel
+     * @param {boolean} hasChanged Whether the selection has changed from the default
+     * @param {func} onSelect Call with the channel to set the selected channel
+     * @param {func} onCurrencySelect Call with the currency to set the selected currnecy
+     * @param {func} onLanguageSelect Call with the language to set the selected lanauge
+     */
+    render: RenderCallback;
+}
+export interface ChannelSelectorState {
+    selectedChannel: SelectedChannel;
+    hasChanged: boolean;
+}
+export declare type SelectChannel = (channel: number | string, culture?: string, currency?: string, country?: string) => void;
+export declare type SelectCurrency = (currency: string) => void;
+export declare type SelectLanguage = (language: string) => void;
+/** Wraps either MiniSelector or LargeSelector and provides controlled state */
+export default class ChannelSelector extends React.Component<ChannelSelectorProps, ChannelSelectorState> {
+    state: {
+        selectedChannel: SelectedChannel;
+        hasChanged: boolean;
+    };
+    setDirtyState: () => void;
+    componentDidUpdate(_prevProps: any, prevState: any): void;
+    selectChannel: SelectChannel;
+    selectCurrency: SelectCurrency;
+    selectLanguage: SelectLanguage;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}
+export declare const LangCurrWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const SelectorBody: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const Title: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/ChannelSelector.js

@@ -1,80 +1,80 @@
-import { createSelectedChannel, findChannel, findChannelById } from '@jetshop/core/ChannelHandler/channelUtils';
-import { styled } from 'linaria/react';
-import React from 'react';
-/** Wraps either MiniSelector or LargeSelector and provides controlled state */
-export default class ChannelSelector extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            selectedChannel: this.props.initialChannel,
-            hasChanged: false
-        };
-        this.setDirtyState = () => {
-            const hasChanged = this.state.selectedChannel.name !== this.props.initialChannel.name ||
-                this.state.selectedChannel.language.name !==
-                    this.props.initialChannel.language.name ||
-                this.state.selectedChannel.currency.name !==
-                    this.props.initialChannel.currency.name ||
-                this.state.selectedChannel.country.name !==
-                    this.props.initialChannel.country.name;
-            this.setState({ hasChanged });
-        };
-        this.selectChannel = (channel, culture, currency, country) => {
-            const selectedChannel = createSelectedChannel(typeof channel === 'number'
-                ? findChannelById(channel, this.props.channels)
-                : findChannel(channel, this.props.channels), culture, currency, country);
-            this.setState({
-                selectedChannel
-            });
-            return selectedChannel;
-        };
-        this.selectCurrency = (selectedCurrency) => {
-            const currency = this.state.selectedChannel.currencies.find((currency) => currency.name === selectedCurrency);
-            this.setState({
-                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { currency })
-            });
-        };
-        this.selectLanguage = (selectedLanguage) => {
-            const language = this.state.selectedChannel.languages.find((language) => language.name === selectedLanguage);
-            this.setState({
-                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { language })
-            });
-        };
-    }
-    componentDidUpdate(_prevProps, prevState) {
-        (prevState.selectedChannel.name !== this.state.selectedChannel.name ||
-            prevState.selectedChannel.language.name !==
-                this.state.selectedChannel.language.name ||
-            prevState.selectedChannel.currency.name !==
-                this.state.selectedChannel.currency.name ||
-            prevState.selectedChannel.country.name !==
-                this.state.selectedChannel.country.name) &&
-            this.setDirtyState();
-    }
-    render() {
-        const { render, channels } = this.props;
-        const currencyItems = this.state.selectedChannel.currencies.map(currency => {
-            return {
-                label: currency.name,
-                val: currency.name
-            };
-        });
-        const languageItems = this.state.selectedChannel.languages.map(language => {
-            return {
-                label: language.name,
-                val: language.name
-            };
-        });
-        return render(Object.assign(Object.assign({}, this.state), { channels,
-            currencyItems,
-            languageItems, onSelect: this.selectChannel, onCurrencySelect: this.selectCurrency, onLanguageSelect: this.selectLanguage }));
-    }
-}
-// For some reason Styleguidist breaks unless this comes after
-// the default export
-export const LangCurrWrapper = styled('div') `
-  background: #f5f5f5;
-`;
-export const SelectorBody = styled('section') ``;
-export const Title = styled('h1') ``;
+import { createSelectedChannel, findChannel, findChannelById } from '@jetshop/core/ChannelHandler/channelUtils';
+import { styled } from 'linaria/react';
+import React from 'react';
+/** Wraps either MiniSelector or LargeSelector and provides controlled state */
+export default class ChannelSelector extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            selectedChannel: this.props.initialChannel,
+            hasChanged: false
+        };
+        this.setDirtyState = () => {
+            const hasChanged = this.state.selectedChannel.name !== this.props.initialChannel.name ||
+                this.state.selectedChannel.language.name !==
+                    this.props.initialChannel.language.name ||
+                this.state.selectedChannel.currency.name !==
+                    this.props.initialChannel.currency.name ||
+                this.state.selectedChannel.country.name !==
+                    this.props.initialChannel.country.name;
+            this.setState({ hasChanged });
+        };
+        this.selectChannel = (channel, culture, currency, country) => {
+            const selectedChannel = createSelectedChannel(typeof channel === 'number'
+                ? findChannelById(channel, this.props.channels)
+                : findChannel(channel, this.props.channels), culture, currency, country);
+            this.setState({
+                selectedChannel
+            });
+            return selectedChannel;
+        };
+        this.selectCurrency = (selectedCurrency) => {
+            const currency = this.state.selectedChannel.currencies.find((currency) => currency.name === selectedCurrency);
+            this.setState({
+                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { currency })
+            });
+        };
+        this.selectLanguage = (selectedLanguage) => {
+            const language = this.state.selectedChannel.languages.find((language) => language.name === selectedLanguage);
+            this.setState({
+                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { language })
+            });
+        };
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        (prevState.selectedChannel.name !== this.state.selectedChannel.name ||
+            prevState.selectedChannel.language.name !==
+                this.state.selectedChannel.language.name ||
+            prevState.selectedChannel.currency.name !==
+                this.state.selectedChannel.currency.name ||
+            prevState.selectedChannel.country.name !==
+                this.state.selectedChannel.country.name) &&
+            this.setDirtyState();
+    }
+    render() {
+        const { render, channels } = this.props;
+        const currencyItems = this.state.selectedChannel.currencies.map(currency => {
+            return {
+                label: currency.name,
+                val: currency.name
+            };
+        });
+        const languageItems = this.state.selectedChannel.languages.map(language => {
+            return {
+                label: language.name,
+                val: language.name
+            };
+        });
+        return render(Object.assign(Object.assign({}, this.state), { channels,
+            currencyItems,
+            languageItems, onSelect: this.selectChannel, onCurrencySelect: this.selectCurrency, onLanguageSelect: this.selectLanguage }));
+    }
+}
+// For some reason Styleguidist breaks unless this comes after
+// the default export
+export const LangCurrWrapper = styled('div') `
+  background: #f5f5f5;
+`;
+export const SelectorBody = styled('section') ``;
+export const Title = styled('h1') ``;
 //# sourceMappingURL=ChannelSelector.js.map

package/ChannelSelector/ChannelSelector.test.js

@@ -1,167 +1,167 @@
-import React from 'react';
-import ChannelSelector from './ChannelSelector';
-
-xdescribe('ChannelSelector', () => {
-  let props;
-  let state;
-  let mountedChannelSelector;
-  const SWE = {
-    name: 'Sweden',
-    code: 'SE',
-    region: 'Europe',
-    defaultLanguage: 'SWE',
-    defaultCurrency: 'SEK',
-    language: [
-      { val: 'SWE', label: 'SWE' },
-      { val: 'ENG', label: 'ENG' }
-    ],
-    currency: [
-      { val: 'SEK', label: 'SEK' },
-      { val: 'USD', label: 'USD' }
-    ]
-  };
-  const AUS = {
-    name: 'Australia',
-    code: 'AU',
-    region: 'Oceania',
-    defaultLanguage: 'ENG',
-    defaultCurrency: 'AUD',
-    language: [
-      { val: 'GER', label: 'GER' },
-      { val: 'ENG', label: 'ENG' }
-    ],
-    currency: [
-      { val: 'AUD', label: 'AUD' },
-      { val: 'USD', label: 'USD' }
-    ]
-  };
-  let countries = [
-    AUS,
-    {
-      name: 'New Zealand',
-      code: 'NZ',
-      region: 'Oceania',
-      defaultLanguage: 'ENG',
-      defaultCurrency: 'NZD',
-      language: [
-        { val: 'GER', label: 'GER' },
-        { val: 'ENG', label: 'ENG' }
-      ],
-      currency: [
-        { val: 'EUR', label: 'EUR' },
-        { val: 'NZD', label: 'NDZ' }
-      ]
-    },
-    SWE
-  ];
-
-  /** @returns {ReactWrapper} */
-  const channelSelector = () =>
-    (mountedChannelSelector = !mountedChannelSelector
-      ? (mountedChannelSelector = mount(<ChannelSelector {...props} />))
-      : mountedChannelSelector);
-
-  beforeEach(() => {
-    props = {
-      countries: countries,
-      initialCountry: SWE,
-      initialCurrency: 'USD',
-      initialLanguage: 'GER',
-      render: jest.fn().mockReturnValue(null)
-    };
-    state = {
-      selectedCountry: props.initialCountry,
-      selectedCurrency: props.initialCurrency,
-      selectedLanguage: props.initialLanguage,
-      hasChanged: false
-    };
-    mountedChannelSelector = undefined;
-  });
-
-  describe('renders', () => {
-    it('only what the `render` prop returns', () => {
-      props.render = jest.fn().mockReturnValue('hello');
-      expect(channelSelector().text()).toBe('hello');
-    });
-  });
-  describe('calls `render`', () => {
-    it('when mounted', () => {
-      channelSelector();
-      expect(props.render).toHaveBeenCalledTimes(1);
-    });
-    it('with initial state, countries, and state modifier instance methods', () => {
-      channelSelector();
-      const instance = channelSelector().instance();
-      expect(props.render).toHaveBeenCalledWith({
-        ...state,
-        countries,
-        onSelect: instance.selectCountry,
-        onCurrencySelect: instance.selectCurrency,
-        onLanguageSelect: instance.selectLanguage
-      });
-    });
-    describe('with `hasChanged` set to true', () => {
-      // Is there a better way to mock this?
-      afterEach(() => {
-        channelSelector()
-          .children()
-          .props()
-          .onClick();
-
-        expect(props.render).toHaveBeenLastCalledWith(
-          expect.objectContaining({ hasChanged: true })
-        );
-      });
-      it('if the selectedCountry changes', () => {
-        props.render = jest.fn(({ onSelect }) => (
-          <div onClick={() => onSelect(AUS)} />
-        ));
-      });
-      it('if the selectedCurrency changes', () => {
-        props.render = jest.fn(({ onCurrencySelect }) => (
-          <div onClick={() => onCurrencySelect('AUD')} />
-        ));
-      });
-      it('if the selectedLanguage changes', () => {
-        props.render = jest.fn(({ onLanguageSelect }) => (
-          <div onClick={() => onLanguageSelect('ENG')} />
-        ));
-      });
-    });
-  });
-
-  describe('when selectedCountry changes', () => {
-    it("sets the `selectedCurrency` and `selectedLanguage` to that country's default", () => {
-      props.render = jest.fn(({ onSelect }) => (
-        <div onClick={() => onSelect(AUS)} />
-      ));
-      channelSelector()
-        .children()
-        .props()
-        .onClick();
-
-      expect(props.render).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          selectedLanguage: 'ENG',
-          selectedCurrency: 'AUD'
-        })
-      );
-    });
-  });
-
-  describe('accepts props to define initial state', () => {
-    // Are these necessary, or just testing implementation details?
-    it('for the selected country', () => {
-      props.initialCountry = SWE;
-      expect(channelSelector().state().selectedCountry).toBe(SWE);
-    });
-    it('for the selected currency', () => {
-      props.initialCurrency = 'AUD';
-      expect(channelSelector().state().selectedCurrency).toBe('AUD');
-    });
-    it('for the selected language', () => {
-      props.initialLanguage = 'ENG';
-      expect(channelSelector().state().selectedLanguage).toBe('ENG');
-    });
-  });
-});
+import React from 'react';
+import ChannelSelector from './ChannelSelector';
+
+xdescribe('ChannelSelector', () => {
+  let props;
+  let state;
+  let mountedChannelSelector;
+  const SWE = {
+    name: 'Sweden',
+    code: 'SE',
+    region: 'Europe',
+    defaultLanguage: 'SWE',
+    defaultCurrency: 'SEK',
+    language: [
+      { val: 'SWE', label: 'SWE' },
+      { val: 'ENG', label: 'ENG' }
+    ],
+    currency: [
+      { val: 'SEK', label: 'SEK' },
+      { val: 'USD', label: 'USD' }
+    ]
+  };
+  const AUS = {
+    name: 'Australia',
+    code: 'AU',
+    region: 'Oceania',
+    defaultLanguage: 'ENG',
+    defaultCurrency: 'AUD',
+    language: [
+      { val: 'GER', label: 'GER' },
+      { val: 'ENG', label: 'ENG' }
+    ],
+    currency: [
+      { val: 'AUD', label: 'AUD' },
+      { val: 'USD', label: 'USD' }
+    ]
+  };
+  let countries = [
+    AUS,
+    {
+      name: 'New Zealand',
+      code: 'NZ',
+      region: 'Oceania',
+      defaultLanguage: 'ENG',
+      defaultCurrency: 'NZD',
+      language: [
+        { val: 'GER', label: 'GER' },
+        { val: 'ENG', label: 'ENG' }
+      ],
+      currency: [
+        { val: 'EUR', label: 'EUR' },
+        { val: 'NZD', label: 'NDZ' }
+      ]
+    },
+    SWE
+  ];
+
+  /** @returns {ReactWrapper} */
+  const channelSelector = () =>
+    (mountedChannelSelector = !mountedChannelSelector
+      ? (mountedChannelSelector = mount(<ChannelSelector {...props} />))
+      : mountedChannelSelector);
+
+  beforeEach(() => {
+    props = {
+      countries: countries,
+      initialCountry: SWE,
+      initialCurrency: 'USD',
+      initialLanguage: 'GER',
+      render: jest.fn().mockReturnValue(null)
+    };
+    state = {
+      selectedCountry: props.initialCountry,
+      selectedCurrency: props.initialCurrency,
+      selectedLanguage: props.initialLanguage,
+      hasChanged: false
+    };
+    mountedChannelSelector = undefined;
+  });
+
+  describe('renders', () => {
+    it('only what the `render` prop returns', () => {
+      props.render = jest.fn().mockReturnValue('hello');
+      expect(channelSelector().text()).toBe('hello');
+    });
+  });
+  describe('calls `render`', () => {
+    it('when mounted', () => {
+      channelSelector();
+      expect(props.render).toHaveBeenCalledTimes(1);
+    });
+    it('with initial state, countries, and state modifier instance methods', () => {
+      channelSelector();
+      const instance = channelSelector().instance();
+      expect(props.render).toHaveBeenCalledWith({
+        ...state,
+        countries,
+        onSelect: instance.selectCountry,
+        onCurrencySelect: instance.selectCurrency,
+        onLanguageSelect: instance.selectLanguage
+      });
+    });
+    describe('with `hasChanged` set to true', () => {
+      // Is there a better way to mock this?
+      afterEach(() => {
+        channelSelector()
+          .children()
+          .props()
+          .onClick();
+
+        expect(props.render).toHaveBeenLastCalledWith(
+          expect.objectContaining({ hasChanged: true })
+        );
+      });
+      it('if the selectedCountry changes', () => {
+        props.render = jest.fn(({ onSelect }) => (
+          <div onClick={() => onSelect(AUS)} />
+        ));
+      });
+      it('if the selectedCurrency changes', () => {
+        props.render = jest.fn(({ onCurrencySelect }) => (
+          <div onClick={() => onCurrencySelect('AUD')} />
+        ));
+      });
+      it('if the selectedLanguage changes', () => {
+        props.render = jest.fn(({ onLanguageSelect }) => (
+          <div onClick={() => onLanguageSelect('ENG')} />
+        ));
+      });
+    });
+  });
+
+  describe('when selectedCountry changes', () => {
+    it("sets the `selectedCurrency` and `selectedLanguage` to that country's default", () => {
+      props.render = jest.fn(({ onSelect }) => (
+        <div onClick={() => onSelect(AUS)} />
+      ));
+      channelSelector()
+        .children()
+        .props()
+        .onClick();
+
+      expect(props.render).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          selectedLanguage: 'ENG',
+          selectedCurrency: 'AUD'
+        })
+      );
+    });
+  });
+
+  describe('accepts props to define initial state', () => {
+    // Are these necessary, or just testing implementation details?
+    it('for the selected country', () => {
+      props.initialCountry = SWE;
+      expect(channelSelector().state().selectedCountry).toBe(SWE);
+    });
+    it('for the selected currency', () => {
+      props.initialCurrency = 'AUD';
+      expect(channelSelector().state().selectedCurrency).toBe('AUD');
+    });
+    it('for the selected language', () => {
+      props.initialLanguage = 'ENG';
+      expect(channelSelector().state().selectedLanguage).toBe('ENG');
+    });
+  });
+});

package/ChannelSelector/ChannelSelectorButtons.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const CommitButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;
-export declare const CancelButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;
+/// <reference types="react" />
+export declare const CommitButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;
+export declare const CancelButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;