@jetshop/ui 0.0.11

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/flyght-core/components/ChannelContext/ChannelContext';
+import { Channel } from '@jetshop/flyght-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/Channels.test.js

@@ -0,0 +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);
+    });
+  });
+});

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/flyght-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/Region.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Region from './Region';
+import { render } from '@testing-library/react';
+
+xdescribe('Region', () => {
+  let countries = [
+    {
+      name: 'Sweden',
+      code: 'SE',
+      region: 'Europe'
+    },
+    {
+      name: 'Australia',
+      code: 'AU',
+      region: 'Oceania'
+    }
+  ];
+  const grouped = {
+    Europe: [{ name: 'Sweden', code: 'SE', region: 'Europe' }],
+    Oceania: [{ name: 'Australia', code: 'AU', region: 'Oceania' }]
+  };
+
+  describe('calls `render`', () => {
+    const renderFn = jest.fn();
+
+    it('once for each region in `countries` array', () => {
+      render(<Region render={renderFn} countries={countries} />);
+      expect(renderFn).toHaveBeenCalledTimes(2);
+    });
+    it("with region name and region's countries", () => {
+      expect(renderFn).toHaveBeenCalledWith({
+        region: 'Europe' || 'Oceania',
+        regionCountries: grouped['Europe'] || grouped['Oceania']
+      });
+    });
+  });
+});