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

package/Button/Button.js

@@ -1,60 +1,60 @@
-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 * as React from 'react';
-import { styled } from 'linaria/react';
-export const buttonStyles = `
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  color: white;
-  background-color: grey;
-  border-color: grey;
-  cursor: pointer;
-
-  text-align: center;
-  height: 54px;
-  font-family: 'Source Sans Pro', sans-serif;
-  width: 100%;
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-const BaseButton = styled('button') `
-  ${buttonStyles};
-  @media (--above-md) {
-    max-width: 300px;
-  }
-`;
-const BaseLink = styled('a') `
-  ${buttonStyles};
-  text-decoration: none;
-  @media (--above.md) {
-    max-width: 300px;
-  }
-
-  :hover {
-    text-decoration: none;
-  }
-`;
-const Button = (_a) => {
-    var { icon, text, children, anchor = false } = _a, rest = __rest(_a, ["icon", "text", "children", "anchor"]);
-    const Comp = anchor ? BaseLink : BaseButton;
-    return (React.createElement(Comp, Object.assign({ type: "button" }, rest),
-        icon ? [React.createElement(icon, { key: 'icon' }), ' '] : '',
-        text,
-        children));
-};
-export default Button;
+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 * as React from 'react';
+import { styled } from 'linaria/react';
+export const buttonStyles = `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  color: white;
+  background-color: grey;
+  border-color: grey;
+  cursor: pointer;
+
+  text-align: center;
+  height: 54px;
+  font-family: 'Source Sans Pro', sans-serif;
+  width: 100%;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const BaseButton = styled('button') `
+  ${buttonStyles};
+  @media (--above-md) {
+    max-width: 300px;
+  }
+`;
+const BaseLink = styled('a') `
+  ${buttonStyles};
+  text-decoration: none;
+  @media (--above.md) {
+    max-width: 300px;
+  }
+
+  :hover {
+    text-decoration: none;
+  }
+`;
+const Button = (_a) => {
+    var { icon, text, children, anchor = false } = _a, rest = __rest(_a, ["icon", "text", "children", "anchor"]);
+    const Comp = anchor ? BaseLink : BaseButton;
+    return (React.createElement(Comp, Object.assign({ type: "button" }, rest),
+        icon ? [React.createElement(icon, { key: 'icon' }), ' '] : '',
+        text,
+        children));
+};
+export default Button;
 //# sourceMappingURL=Button.js.map

package/Button/OutlineButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const OutlineButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
-/** @component */
-export default OutlineButton;
+/// <reference types="react" />
+export declare const OutlineButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+/** @component */
+export default OutlineButton;

package/Button/OutlineButton.js

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

package/Button/SecondaryButton.d.ts

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

package/Button/SecondaryButton.js

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

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

package/Button/TrendButton.js

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

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

package/Button/index.js

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

package/CategoryLink.d.ts

@@ -1,9 +1,9 @@
-import * as 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;
-}
-declare const CategoryLink: React.FC<CategoryLinkProps>;
-export default CategoryLink;
+import * as 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;
+}
+declare const CategoryLink: React.FC<CategoryLinkProps>;
+export default CategoryLink;

package/CategoryLink.js

@@ -1,43 +1,43 @@
-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 * as 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 } = _a, props = __rest(_a, ["category", "children"]);
-    const { preload } = useRoutePreload();
-    const categoryPreload = () => {
-        preload({
-            pathname: primaryRoute && primaryRoute.path,
-            routeType: 'Category'
-        });
-    };
-    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 }), children ? children : name));
-    }
-    else
-        return null;
-};
-export default CategoryLink;
+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 * as 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 } = _a, props = __rest(_a, ["category", "children"]);
+    const { preload } = useRoutePreload();
+    const categoryPreload = () => {
+        preload({
+            pathname: primaryRoute && primaryRoute.path,
+            routeType: 'Category'
+        });
+    };
+    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 }), children ? children : name));
+    }
+    else
+        return null;
+};
+export default CategoryLink;
 //# sourceMappingURL=CategoryLink.js.map

package/ChannelSelector/ChannelListItem.d.ts

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

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

@@ -1,85 +1,85 @@
-import React from 'react';
-import CountryListItem from './ChannelListItem';
-
-xdescribe('CountryListItem', () => {
-  const country = { name: 'Australia', code: 'AUS' };
-  let props;
-  let mountedCountryListItem;
-
-  const countryListItem = () =>
-    (mountedCountryListItem = !mountedCountryListItem
-      ? (mountedCountryListItem = mount(<CountryListItem {...props} />))
-      : mountedCountryListItem);
-
-  beforeEach(() => {
-    props = {
-      country: undefined,
-      onSelect: undefined,
-      isSelected: undefined
-    };
-    mountedCountryListItem = undefined;
-  });
-
-  it('renders correctly', () => {
-    props.country = country;
-    expect(countryListItem()).toMatchSnapshot();
-  });
-
-  it('renders the name of the passed `country`', () => {
-    props.country = country;
-    expect(countryListItem().text()).toBe(country.name);
-  });
-
-  it('renders the flag of the passed `country`', () => {
-    props.country = country;
-    expect(
-      countryListItem()
-        .find('img')
-        .props().src
-    ).toMatch(country.code);
-  });
-
-  describe('when `isSelected` is true', () => {
-    beforeEach(() => {
-      props.country = country;
-      props.isSelected = true;
-    });
-
-    it('renders with `selected` styles', () => {
-      expect(countryListItem()).toMatchSnapshot();
-    });
-
-    it('passes `isSelected` to the rendered styled component', () => {
-      expect(
-        countryListItem()
-          .childAt(0)
-          .props().isSelected
-      ).toBe(true);
-    });
-  });
-
-  describe('when clicked', () => {
-    beforeEach(() => {
-      props.onSelect = jest.fn();
-      props.country = country;
-    });
-    it('calls `onSelect` with the country', () => {
-      countryListItem().simulate('click');
-      expect(props.onSelect).toBeCalledWith(props.country);
-    });
-  });
-
-  describe('when focused', () => {
-    beforeEach(() => {
-      props.onSelect = jest.fn();
-      props.country = country;
-      props.isSelected = true;
-      countryListItem().simulate('focus');
-    });
-
-    it('calls `onSelect` with the country if enter is pressed', () => {
-      countryListItem().simulate('keydown', { key: 'Enter' });
-      expect(props.onSelect).toBeCalledWith(props.country);
-    });
-  });
-});
+import React from 'react';
+import CountryListItem from './ChannelListItem';
+
+xdescribe('CountryListItem', () => {
+  const country = { name: 'Australia', code: 'AUS' };
+  let props;
+  let mountedCountryListItem;
+
+  const countryListItem = () =>
+    (mountedCountryListItem = !mountedCountryListItem
+      ? (mountedCountryListItem = mount(<CountryListItem {...props} />))
+      : mountedCountryListItem);
+
+  beforeEach(() => {
+    props = {
+      country: undefined,
+      onSelect: undefined,
+      isSelected: undefined
+    };
+    mountedCountryListItem = undefined;
+  });
+
+  it('renders correctly', () => {
+    props.country = country;
+    expect(countryListItem()).toMatchSnapshot();
+  });
+
+  it('renders the name of the passed `country`', () => {
+    props.country = country;
+    expect(countryListItem().text()).toBe(country.name);
+  });
+
+  it('renders the flag of the passed `country`', () => {
+    props.country = country;
+    expect(
+      countryListItem()
+        .find('img')
+        .props().src
+    ).toMatch(country.code);
+  });
+
+  describe('when `isSelected` is true', () => {
+    beforeEach(() => {
+      props.country = country;
+      props.isSelected = true;
+    });
+
+    it('renders with `selected` styles', () => {
+      expect(countryListItem()).toMatchSnapshot();
+    });
+
+    it('passes `isSelected` to the rendered styled component', () => {
+      expect(
+        countryListItem()
+          .childAt(0)
+          .props().isSelected
+      ).toBe(true);
+    });
+  });
+
+  describe('when clicked', () => {
+    beforeEach(() => {
+      props.onSelect = jest.fn();
+      props.country = country;
+    });
+    it('calls `onSelect` with the country', () => {
+      countryListItem().simulate('click');
+      expect(props.onSelect).toBeCalledWith(props.country);
+    });
+  });
+
+  describe('when focused', () => {
+    beforeEach(() => {
+      props.onSelect = jest.fn();
+      props.country = country;
+      props.isSelected = true;
+      countryListItem().simulate('focus');
+    });
+
+    it('calls `onSelect` with the country if enter is pressed', () => {
+      countryListItem().simulate('keydown', { key: 'Enter' });
+      expect(props.onSelect).toBeCalledWith(props.country);
+    });
+  });
+});