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

package/ChannelSelector/ChannelSelectorButtons.js

@@ -1,20 +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};
-`;
+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/Channels.d.ts

@@ -1,17 +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>;
-}>;
+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

@@ -1,12 +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;
-`;
+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.test.js

@@ -1,90 +1,90 @@
-import React from 'react';
-import Countries from './Channels';
-import CountryListItem from './ChannelListItem';
-
-xdescribe('Countries', () => {
-  const AUS = { name: 'Australia', code: 'AUS' };
-  const SWE = { name: 'Sweden', code: 'SWE' };
-  const validCountries = {
-    selectedCountry: AUS,
-    countries: [AUS, SWE]
-  };
-  let props;
-  let mountedCountries;
-
-  const countries = () =>
-    (mountedCountries = !mountedCountries
-      ? (mountedCountries = shallow(<Countries {...props} />))
-      : mountedCountries);
-
-  beforeEach(() => {
-    props = {
-      countries: undefined,
-      selectedCountry: undefined,
-      onSelect: undefined
-    };
-    mountedCountries = undefined;
-  });
-
-  describe('when `countries` is undefined', () => {
-    it('no children are rendered', () => {
-      expect(countries().children()).toHaveLength(0);
-    });
-  });
-  describe('when `countries` is an empty array', () => {
-    it('no children are rendered', () => {
-      props.countries = [];
-      expect(countries().children()).toHaveLength(0);
-    });
-  });
-  describe('when `countries` contains an array of countries', () => {
-    beforeEach(() => {
-      props = validCountries;
-    });
-    it('a `CountryListItem` is rendered for each country', () => {
-      expect(
-        countries()
-          .children()
-          .find(CountryListItem)
-      ).toHaveLength(2);
-    });
-    describe('and `selectedCountry` matches the country being rendered', () => {
-      it("the `CountryListItem`'s `isSelected` prop is true", () => {
-        const AusChild = countries().childAt(1);
-        expect('isSelected' in AusChild.props()).toEqual(true);
-      });
-    });
-    describe('and `selectedCountry` does not match the country being rendered', () => {
-      it("the `CountryListItem`'s `isSelected` prop is false", () => {
-        const SweChild = countries().childAt(2);
-        expect('isSelected' in SweChild.props()).toEqual(false);
-      });
-    });
-  });
-
-  describe('when `onSelect` is defined', () => {
-    beforeEach(() => {
-      props = Object.assign(validCountries, { onSelect: jest.fn() });
-    });
-
-    it("sets the rendered `CountryListItem`'s `onSelect` prop to the same value", () => {
-      const countryListItem = countries()
-        .find(CountryListItem)
-        .first();
-      expect(countryListItem.props().onSelect).toBe(props.onSelect);
-    });
-  });
-
-  describe('when `onSelect` is undefined', () => {
-    beforeEach(() => {
-      props = Object.assign(validCountries, { onSelect: undefined });
-    });
-
-    it("sets the rendered `CountryListItem`'s `onSelect` prop to undefined", () => {
-      const countryListItem = countries()
-        .find(CountryListItem)
-        .first();
-      expect(countryListItem.props().onSelect).toBe(undefined);
-    });
-  });
-});
+import React from 'react';
+import Countries from './Channels';
+import CountryListItem from './ChannelListItem';
+
+xdescribe('Countries', () => {
+  const AUS = { name: 'Australia', code: 'AUS' };
+  const SWE = { name: 'Sweden', code: 'SWE' };
+  const validCountries = {
+    selectedCountry: AUS,
+    countries: [AUS, SWE]
+  };
+  let props;
+  let mountedCountries;
+
+  const countries = () =>
+    (mountedCountries = !mountedCountries
+      ? (mountedCountries = shallow(<Countries {...props} />))
+      : mountedCountries);
+
+  beforeEach(() => {
+    props = {
+      countries: undefined,
+      selectedCountry: undefined,
+      onSelect: undefined
+    };
+    mountedCountries = undefined;
+  });
+
+  describe('when `countries` is undefined', () => {
+    it('no children are rendered', () => {
+      expect(countries().children()).toHaveLength(0);
+    });
+  });
+  describe('when `countries` is an empty array', () => {
+    it('no children are rendered', () => {
+      props.countries = [];
+      expect(countries().children()).toHaveLength(0);
+    });
+  });
+  describe('when `countries` contains an array of countries', () => {
+    beforeEach(() => {
+      props = validCountries;
+    });
+    it('a `CountryListItem` is rendered for each country', () => {
+      expect(
+        countries()
+          .children()
+          .find(CountryListItem)
+      ).toHaveLength(2);
+    });
+    describe('and `selectedCountry` matches the country being rendered', () => {
+      it("the `CountryListItem`'s `isSelected` prop is true", () => {
+        const AusChild = countries().childAt(1);
+        expect('isSelected' in AusChild.props()).toEqual(true);
+      });
+    });
+    describe('and `selectedCountry` does not match the country being rendered', () => {
+      it("the `CountryListItem`'s `isSelected` prop is false", () => {
+        const SweChild = countries().childAt(2);
+        expect('isSelected' in SweChild.props()).toEqual(false);
+      });
+    });
+  });
+
+  describe('when `onSelect` is defined', () => {
+    beforeEach(() => {
+      props = Object.assign(validCountries, { onSelect: jest.fn() });
+    });
+
+    it("sets the rendered `CountryListItem`'s `onSelect` prop to the same value", () => {
+      const countryListItem = countries()
+        .find(CountryListItem)
+        .first();
+      expect(countryListItem.props().onSelect).toBe(props.onSelect);
+    });
+  });
+
+  describe('when `onSelect` is undefined', () => {
+    beforeEach(() => {
+      props = Object.assign(validCountries, { onSelect: undefined });
+    });
+
+    it("sets the rendered `CountryListItem`'s `onSelect` prop to undefined", () => {
+      const countryListItem = countries()
+        .find(CountryListItem)
+        .first();
+      expect(countryListItem.props().onSelect).toBe(undefined);
+    });
+  });
+});

package/ChannelSelector/LargeSelector.d.ts

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

package/ChannelSelector/LargeSelector.js

@@ -1,67 +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;
+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/MiniSelector.d.ts

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

package/ChannelSelector/MiniSelector.js

@@ -1,58 +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;
+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/Region.d.ts

@@ -1,28 +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>;
-}>;
+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

@@ -1,21 +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') ``;
+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