@jetshop/ui 6.3.9-alpha.1 → 6.5.0

package/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC/B,YAAY;;;;CAIf,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IACxB,YAAY;;;;;;;;;CASf,CAAC;AAaF,MAAM,MAAM,GAA2B,CAAC,EAMvC,EAAE,EAAE;QANmC,EACtC,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAL+B,sCAMvC,CADQ;IAEP,MAAM,IAAI,GAAsB,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;IAE/D,OAAO,CACL,oBAAC,IAAI,kBAAC,IAAI,EAAC,QAAQ,IAAK,IAAI;QACzB,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;QAC7D,IAAI;QACJ,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Button/SecondaryButton.d.ts

@@ -0,0 +1,2 @@
+export declare const SecondaryButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+export default SecondaryButton;

package/Button/SecondaryButton.js

@@ -0,0 +1,9 @@
+import { styled } from 'linaria/react';
+import Button from './Button';
+export const SecondaryButton = styled(Button) `
+  background: ${({ inverted }) => (inverted ? '#000' : '#fff')};
+  color: ${({ inverted }) => (inverted ? '#fff' : '#000')};
+  border: 1px solid ${({ inverted }) => (inverted ? '#000' : '#fff')};
+`;
+export default SecondaryButton;
+//# sourceMappingURL=SecondaryButton.js.map

package/Button/SecondaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryButton.js","sourceRoot":"","sources":["SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBAC7B,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;WACxD,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACxC,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/Button/TrendButton.d.ts

@@ -0,0 +1,2 @@
+export declare const TrendButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+export default TrendButton;

package/Button/TrendButton.js

@@ -0,0 +1,8 @@
+import { styled } from 'linaria/react';
+import Button from './Button';
+export const TrendButton = styled(Button) `
+  background: ${({ inverted }) => (inverted ? '#fff' : '#000')};
+  color: ${({ inverted }) => (inverted ? '#000' : '#fff')};
+`;
+export default TrendButton;
+//# sourceMappingURL=TrendButton.js.map

package/Button/TrendButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendButton.js","sourceRoot":"","sources":["TrendButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBACzB,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;WACxD,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/Button/index.d.ts

@@ -0,0 +1,4 @@
+import SecondaryButton from './SecondaryButton';
+import TrendButton from './TrendButton';
+export { default } from './Button';
+export { SecondaryButton, TrendButton };

package/Button/index.js

@@ -0,0 +1,5 @@
+import SecondaryButton from './SecondaryButton';
+import TrendButton from './TrendButton';
+export { default } from './Button';
+export { SecondaryButton, TrendButton };
+//# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/CategoryLink.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+import { Category } from '@jetshop/core/types';
+export interface CategoryLinkProps extends Partial<NavLinkProps> {
+    category: Category;
+    className?: string;
+    preloadRoute?: boolean;
+    onMouseEnter?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => any;
+}
+declare const CategoryLink: ({ category: { id, name, primaryRoute }, children, onMouseEnter, preloadRoute, ...props }: CategoryLinkProps) => React.JSX.Element;
+export default CategoryLink;

package/CategoryLink.js

@@ -0,0 +1,49 @@
+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 React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useRoutePreload } from '@jetshop/core/hooks/useRoutePreload';
+import { useHoverIntent } from './utils/useHoverIntent';
+const CategoryLink = (_a) => {
+    var { category: { id, name, primaryRoute }, children, onMouseEnter, preloadRoute = true } = _a, props = __rest(_a, ["category", "children", "onMouseEnter", "preloadRoute"]);
+    const { preload } = useRoutePreload();
+    const categoryPreload = () => {
+        preload({
+            pathname: primaryRoute && primaryRoute.path,
+            routeType: 'Category',
+            preloadRoute
+        });
+    };
+    const [, intentRef] = useHoverIntent({
+        onHover: () => {
+            categoryPreload();
+        }
+    });
+    if (primaryRoute && primaryRoute.path) {
+        return (React.createElement(NavLink, Object.assign({}, props, { to: {
+                pathname: primaryRoute.path,
+                state: {
+                    type: 'Category',
+                    id
+                }
+            }, innerRef: intentRef, onTouchStart: categoryPreload, onMouseEnter: (event) => {
+                categoryPreload();
+                if (typeof onMouseEnter === 'function') {
+                    onMouseEnter(event);
+                }
+            } }), children ? children : name));
+    }
+    else
+        return null;
+};
+export default CategoryLink;
+//# sourceMappingURL=CategoryLink.js.map

package/CategoryLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLink.js","sourceRoot":"","sources":["CategoryLink.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAgB,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUxD,MAAM,YAAY,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EACpB,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EACpC,QAAQ,EACR,YAAY,EACZ,YAAY,GAAG,IAAI,OAED,EADf,KAAK,cALY,wDAMrB,CADS;IAER,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;IACtC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC;YACN,QAAQ,EAAE,YAAY,IAAI,YAAY,CAAC,IAAI;YAC3C,SAAS,EAAE,UAAU;YACrB,YAAY;SACb,CAAC,CAAC;IACL,CAAC,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;QACnC,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE;QACrC,OAAO,CACL,oBAAC,OAAO,oBACF,KAAK,IACT,EAAE,EAAE;gBACF,QAAQ,EAAE,YAAY,CAAC,IAAI;gBAC3B,KAAK,EAAE;oBACL,IAAI,EAAE,UAAU;oBAChB,EAAE;iBACH;aACF,EACD,QAAQ,EAAE,SAAgB,EAC1B,YAAY,EAAE,eAAe,EAC7B,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;gBACtB,eAAe,EAAE,CAAC;gBAClB,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;oBACtC,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;YACH,CAAC,KAEA,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACnB,CACX,CAAC;KACH;;QAAM,OAAO,IAAI,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/ChannelSelector/ChannelListItem.d.ts

@@ -0,0 +1,10 @@
+import { SFC } from 'react';
+import { Channel } from '@jetshop/core/types';
+import { SelectChannel } from './ChannelSelector';
+export interface ChannelListItemProps {
+    channel: Channel;
+    onSelect: SelectChannel;
+    isSelected: boolean;
+}
+declare const ChannelListItem: SFC<ChannelListItemProps>;
+export default ChannelListItem;

package/ChannelSelector/ChannelListItem.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+const selectedStyle = `
+  color: #000;
+  font-weight: 600;
+  &:before {
+    /*
+    Using a before pseudo-element allows us to create a background
+    hover effect without adding padding to the element itself.
+    */
+    background: #ebebeb;
+  }
+`;
+const ListItem = styled('li') `
+  list-style: none;
+  margin: 0;
+  padding: 0.75rem 0;
+  color: #4f4f4f;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  z-index: 1;
+  &:before {
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: -0.5rem;
+    right: -0.5rem;
+    z-index: -1;
+    position: absolute;
+    border: 1px solid transparent;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus:before {
+    border-color: #2f80ed;
+  }
+  &.isSelected {
+    ${selectedStyle};
+  }
+  &:hover {
+    ${selectedStyle};
+  }
+`;
+const ChannelListItem = ({ channel, onSelect, isSelected }) => (React.createElement(ListItem, { className: cx(isSelected && 'isSelected'), tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onSelect(channel.id), onClick: () => onSelect(channel.id) }, channel.name));
+export default ChannelListItem;
+//# sourceMappingURL=ChannelListItem.js.map

package/ChannelSelector/ChannelListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItem.js","sourceRoot":"","sources":["ChannelListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAI7B,MAAM,aAAa,GAAG;;;;;;;;;;CAUrB,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BvB,aAAa;;;MAGb,aAAa;;CAElB,CAAC;AAaF,MAAM,eAAe,GAA8B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,UAAU,EACX,EAAE,EAAE,CAAC,CACJ,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,UAAU,IAAI,YAAY,CAAC,EACzC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAqC,EAAE,EAAE,CACnD,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAE3C,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAKlC,OAAO,CAAC,IAAI,CACJ,CACZ,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/ChannelSelector/ChannelSelector.d.ts

@@ -0,0 +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 type SelectChannel = (channel: number | string, culture?: string, currency?: string, country?: string) => void;
+export type SelectCurrency = (currency: string) => void;
+export 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

@@ -0,0 +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') ``;
+//# sourceMappingURL=ChannelSelector.js.map

package/ChannelSelector/ChannelSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelector.js","sourceRoot":"","sources":["ChannelSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,WAAW,EACX,eAAe,EAChB,MAAM,2CAA2C,CAAC;AAInD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAgD1B,+EAA+E;AAC/E,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAGlD;IAHD;;QAIE,UAAK,GAAG;YACN,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;YAC1C,UAAU,EAAE,KAAK;SAClB,CAAC;QAEF,kBAAa,GAAG,GAAG,EAAE;YACnB,MAAM,UAAU,GACd,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI;gBAClE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;oBACtC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI;gBACzC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;oBACtC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI;gBACzC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI;oBACrC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;YAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;QAaF,kBAAa,GAAkB,CAC7B,OAAwB,EACxB,OAAe,EACf,QAAgB,EAChB,OAAe,EACf,EAAE;YACF,MAAM,eAAe,GAAoB,qBAAqB,CAC5D,OAAO,OAAO,KAAK,QAAQ;gBACzB,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;gBAC/C,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAC7C,OAAO,EACP,QAAQ,EACR,OAAO,CACR,CAAC;YACF,IAAI,CAAC,QAAQ,CAAC;gBACZ,eAAe;aAChB,CAAC,CAAC;YACH,OAAO,eAAe,CAAC;QACzB,CAAC,CAAC;QAEF,mBAAc,GAAmB,CAAC,gBAAwB,EAAE,EAAE;YAC5D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,CACzD,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,gBAAgB,CAC3D,CAAC;YACF,IAAI,CAAC,QAAQ,CAAC;gBACZ,eAAe,kCACV,IAAI,CAAC,KAAK,CAAC,eAAe,KAC7B,QAAQ,GACT;aACF,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,mBAAc,GAAmB,CAAC,gBAAwB,EAAE,EAAE;YAC5D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CACxD,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,gBAAgB,CAC3D,CAAC;YACF,IAAI,CAAC,QAAQ,CAAC;gBACZ,eAAe,kCACV,IAAI,CAAC,KAAK,CAAC,eAAe,KAC7B,QAAQ,GACT;aACF,CAAC,CAAC;QACL,CAAC,CAAC;IA8BJ,CAAC;IAnFC,kBAAkB,CAAC,UAAe,EAAE,SAAc;QAChD,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI;YACjE,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;gBACrC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;YAC1C,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;gBACrC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI;YAC1C,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI;gBACpC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC;YAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IA8CD,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxC,MAAM,aAAa,GAAW,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,CACrE,QAAQ,CAAC,EAAE;YACT,OAAO;gBACL,KAAK,EAAE,QAAQ,CAAC,IAAI;gBACpB,GAAG,EAAE,QAAQ,CAAC,IAAI;aACnB,CAAC;QACJ,CAAC,CACF,CAAC;QACF,MAAM,aAAa,GAAW,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CACpE,QAAQ,CAAC,EAAE;YACT,OAAO;gBACL,KAAK,EAAE,QAAQ,CAAC,IAAI;gBACpB,GAAG,EAAE,QAAQ,CAAC,IAAI;aACnB,CAAC;QACJ,CAAC,CACF,CAAC;QACF,OAAO,MAAM,iCACR,IAAI,CAAC,KAAK,KACb,QAAQ;YACR,aAAa;YACb,aAAa,EACb,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,gBAAgB,EAAE,IAAI,CAAC,cAAc,EACrC,gBAAgB,EAAE,IAAI,CAAC,cAAc,IACrC,CAAC;IACL,CAAC;CACF;AAED,8DAA8D;AAC9D,qBAAqB;AACrB,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;CAE3C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,EAAE,CAAC;AAChD,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC"}

package/ChannelSelector/ChannelSelectorButtons.d.ts

@@ -0,0 +1,2 @@
+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>;

package/ChannelSelector/ChannelSelectorButtons.js

@@ -0,0 +1,20 @@
+import { styled } from 'linaria/react';
+import Button from '../Button/Button';
+const commonStyles = `
+  font-size: 1rem;
+  border: 1px solid transparent;
+  padding: 1rem;
+  /* Button is a child of a flex container, so this aligns to bottom */
+  margin-top: auto;
+  width: 100%;
+`;
+export const CommitButton = styled(Button) `
+  background: #2f80ed;
+  ${commonStyles};
+`;
+export const CancelButton = styled(Button) `
+  background: white;
+  color: #000;
+  ${commonStyles};
+`;
+//# sourceMappingURL=ChannelSelectorButtons.js.map

package/ChannelSelector/ChannelSelectorButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelectorButtons.js","sourceRoot":"","sources":["ChannelSelectorButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,YAAY,GAAG;;;;;;;CAOpB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;IAEtC,YAAY;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;IAGtC,YAAY;CACf,CAAC"}

package/ChannelSelector/Channels.d.ts

@@ -0,0 +1,17 @@
+import { SelectedChannel } from '@jetshop/core/components/ChannelContext/ChannelContext';
+import { Channel } from '@jetshop/core/types';
+import React from 'react';
+import { SelectChannel } from './ChannelSelector';
+export interface ChannelsProps {
+    /** An array of channels */
+    channels: Channel[];
+    /** The selected channel obj */
+    selectedChannel: SelectedChannel;
+    /** Called with the country obj when a country is selected */
+    onSelect: SelectChannel;
+}
+declare const Channels: React.SFC<ChannelsProps>;
+export default Channels;
+export declare const ChannelList: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/Channels.js

@@ -0,0 +1,12 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import CountryListItem from './ChannelListItem';
+const Channels = ({ channels, selectedChannel, onSelect }) => {
+    return channels ? (React.createElement(ChannelList, null, channels.map((channel) => (React.createElement(CountryListItem, { channel: channel, key: channel.name, isSelected: channel.name === selectedChannel.name, onSelect: onSelect }))))) : null;
+};
+export default Channels;
+export const ChannelList = styled('ul') `
+  margin: 0;
+  padding: 0;
+`;
+//# sourceMappingURL=Channels.js.map

package/ChannelSelector/Channels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Channels.js","sourceRoot":"","sources":["Channels.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAYhD,MAAM,QAAQ,GAA6B,CAAC,EAC1C,QAAQ,EACR,eAAe,EACf,QAAQ,EACT,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,oBAAC,WAAW,QACT,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAClC,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,UAAU,EAAE,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,IAAI,EACjD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CACU,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGtC,CAAC"}

package/ChannelSelector/LargeSelector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const LargeSelector: React.SFC;
+export default LargeSelector;

package/ChannelSelector/LargeSelector.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { styled } from 'linaria/react';
+import { RegionGroup, RegionWrapper } from './Region';
+import { CommitButton, CancelButton } from './ChannelSelectorButtons';
+import { LangCurrWrapper, SelectorBody, Title } from './ChannelSelector';
+import { CheckboxWrapper } from '../Checkbox/CheckboxGroup';
+const SelectorWrapper = styled('div') `
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  border: 1px solid #e8e8e8;
+  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07);
+
+  ${RegionGroup} {
+    max-width: calc(20% - 2rem);
+    margin: 0 1rem;
+    min-width: 15rem;
+    flex-grow: 1;
+  }
+
+  ${RegionWrapper} {
+    display: flex;
+    margin: 0 -1rem;
+  }
+
+  ${Title} {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 1rem;
+    padding-bottom: 3rem;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  ${CommitButton}, ${CancelButton} {
+    width: 20%;
+    max-width: 15rem;
+    margin-left: auto;
+  }
+
+  ${CancelButton} {
+    border-color: #cccccc;
+  }
+
+  ${LangCurrWrapper} {
+    display: flex;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  ${CheckboxWrapper} {
+    margin-right: 2rem;
+    width: calc(20% + 1rem);
+    strong {
+      font-weight: 600;
+    }
+  }
+  ${SelectorBody} {
+    padding: 1rem;
+  }
+`;
+const LargeSelector = ({ children }) => {
+    return React.createElement(SelectorWrapper, null, children);
+};
+export default LargeSelector;
+//# sourceMappingURL=LargeSelector.js.map

package/ChannelSelector/LargeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LargeSelector.js","sourceRoot":"","sources":["LargeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;IAOjC,WAAkB;;;;;;;IAOlB,aAAoB;;;;;IAKpB,KAAY;;;;;;;;;;IAUZ,YAAmB,KAAK,YAAmB;;;;;;IAM3C,YAAmB;;;;IAInB,eAAsB;;;;;;IAMtB,eAAsB;;;;;;;IAOtB,YAAmB;;;CAGtB,CAAC;AAEF,MAAM,aAAa,GAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChD,OAAO,oBAAC,eAAe,QAAE,QAAQ,CAAmB,CAAC;AACvD,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/ChannelSelector/MiniSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const MiniSelector: React.SFC;
+/** @component */
+export default MiniSelector;

package/ChannelSelector/MiniSelector.js

@@ -0,0 +1,58 @@
+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 React from 'react';
+import { styled } from 'linaria/react';
+import { LangCurrWrapper, SelectorBody, Title } from './ChannelSelector';
+import { CheckboxWrapper } from '../Checkbox/CheckboxGroup';
+const SelectorWrapper = styled('div') `
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  max-width: 16em;
+  border: 1px solid #e8e8e8;
+  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07);
+  background-color: white;
+
+  /* Style the wrapper around language and currency radios */
+  ${LangCurrWrapper} {
+    padding: 1rem;
+    margin: 0.5rem;
+    font-size: 0.875rem;
+    ${CheckboxWrapper} {
+      margin-top: 1rem;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  ${SelectorBody} {
+    padding: 1rem;
+  }
+
+  ${Title} {
+    margin: 0;
+    padding: 0;
+    padding-bottom: 1rem;
+    font-weight: 600;
+    font-size: 0.875em;
+    border-bottom: 1px solid #e8e8e8;
+    text-align: center;
+  }
+`;
+const MiniSelector = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(SelectorWrapper, Object.assign({}, props), children);
+};
+/** @component */
+export default MiniSelector;
+//# sourceMappingURL=MiniSelector.js.map

package/ChannelSelector/MiniSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniSelector.js","sourceRoot":"","sources":["MiniSelector.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;IAUjC,eAAsB;;;;MAIpB,eAAsB;;;;;;;;IAQxB,YAAmB;;;;IAInB,KAAY;;;;;;;;;CASf,CAAC;AAEF,MAAM,YAAY,GAAc,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,cAApB,YAAsB,CAAF;IACnD,OAAO,oBAAC,eAAe,oBAAK,KAAK,GAAG,QAAQ,CAAmB,CAAC;AAClE,CAAC,CAAC;AAEF,iBAAiB;AACjB,eAAe,YAAY,CAAC"}

package/ChannelSelector/Region.d.ts

@@ -0,0 +1,28 @@
+import { Channel } from '@jetshop/core/types';
+import React, { SFC } from 'react';
+export interface ChannelWithRegion extends Channel {
+    region: string;
+}
+export interface RenderCallback {
+    (props: {
+        regionCountries: {
+            [key: string]: Channel[];
+        };
+        region: string;
+    }): React.ReactElement<any>;
+}
+export interface RegionProps {
+    channels: ChannelWithRegion[];
+    render: RenderCallback;
+}
+export declare const Region: SFC<RegionProps>;
+export default Region;
+export declare const RegionName: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const RegionWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const RegionGroup: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/Region.js

@@ -0,0 +1,21 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import groupBy from './groupBy';
+export const Region = ({ channels, render }) => {
+    const groupedCountries = groupBy(channels, channel => channel.region);
+    return (React.createElement(RegionWrapper, null, Object.keys(groupedCountries).map(region => {
+        const regionCountries = groupedCountries[region];
+        return render({ regionCountries, region });
+    })));
+};
+export default Region;
+export const RegionName = styled('h2') `
+  text-transform: uppercase;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem 0;
+`;
+export const RegionWrapper = styled('div') ``;
+export const RegionGroup = styled('div') ``;
+//# sourceMappingURL=Region.js.map

package/ChannelSelector/Region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Region.js","sourceRoot":"","sources":["Region.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,OAAO,MAAM,WAAW,CAAC;AAiBhC,MAAM,CAAC,MAAM,MAAM,GAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAEnE,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,QACX,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1C,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAEjD,OAAO,MAAM,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMrC,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC"}

package/ChannelSelector/groupBy.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Takes in an array and a keyGetter function by which to select
+ * the key to group by. Returns an array.
+ */
+export default function groupBy<T>(list: T[], keyGetter: (item: T) => string): {
+    [key: string]: T[];
+} | T[];

package/ChannelSelector/groupBy.js

@@ -0,0 +1,16 @@
+/**
+ * Takes in an array and a keyGetter function by which to select
+ * the key to group by. Returns an array.
+ */
+export default function groupBy(list, keyGetter) {
+    // Return if the keyGetter does not return a string
+    if (typeof keyGetter(list[0]) !== 'string')
+        return list;
+    return list.reduce((groups, item) => {
+        const key = keyGetter(item);
+        groups[key] = groups[key] || [];
+        groups[key].push(item);
+        return groups;
+    }, {});
+}
+//# sourceMappingURL=groupBy.js.map

package/ChannelSelector/groupBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupBy.js","sourceRoot":"","sources":["groupBy.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAS,EACT,SAA8B;IAE9B,mDAAmD;IACnD,IAAI,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IACxD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,IAAI,EAAE,EAAE;QACvC,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAChC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvB,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}