@jetshop/ui 5.13.1 → 5.13.11-0

package/Price/Price.js

@@ -1,35 +1,35 @@
-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 { usePrice } from '@jetshop/core/hooks/usePrice';
-const Wrapper = styled('div') ``;
-const NormalPrice = styled('div') ``;
-const OldPrice = styled('div') `
-  text-decoration: line-through;
-`;
-const NewPrice = styled('div') ``;
-const PriceComponent = (_a) => {
-    var { className, style, negative } = _a, props = __rest(_a, ["className", "style", "negative"]);
-    const { hasDiscount, formattedPricing } = usePrice(props);
-    return (React.createElement(Wrapper, Object.assign({ className: className, style: style }, props, { "data-flight-price": "" }), hasDiscount ? (React.createElement(React.Fragment, null,
-        React.createElement(NewPrice, { className: "new-price" }, formattedPricing.price),
-        React.createElement(OldPrice, { className: "old-price" }, formattedPricing.previousPrice))) : (React.createElement(NormalPrice, { className: "price" },
-        negative && '-',
-        formattedPricing.price))));
-};
-PriceComponent.Wrapper = Wrapper;
-PriceComponent.Normal = NormalPrice;
-PriceComponent.Old = OldPrice;
-PriceComponent.New = NewPrice;
-export default PriceComponent;
+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 { usePrice } from '@jetshop/core/hooks/usePrice';
+const Wrapper = styled('div') ``;
+const NormalPrice = styled('div') ``;
+const OldPrice = styled('div') `
+  text-decoration: line-through;
+`;
+const NewPrice = styled('div') ``;
+const PriceComponent = (_a) => {
+    var { className, style, negative } = _a, props = __rest(_a, ["className", "style", "negative"]);
+    const { hasDiscount, formattedPricing } = usePrice(props);
+    return (React.createElement(Wrapper, Object.assign({ className: className, style: style }, props, { "data-flight-price": "" }), hasDiscount ? (React.createElement(React.Fragment, null,
+        React.createElement(NewPrice, { className: "new-price" }, formattedPricing.price),
+        React.createElement(OldPrice, { className: "old-price" }, formattedPricing.previousPrice))) : (React.createElement(NormalPrice, { className: "price" },
+        negative && '-',
+        formattedPricing.price))));
+};
+PriceComponent.Wrapper = Wrapper;
+PriceComponent.Normal = NormalPrice;
+PriceComponent.Old = OldPrice;
+PriceComponent.New = NewPrice;
+export default PriceComponent;
 //# sourceMappingURL=Price.js.map

package/Price/index.d.ts

@@ -1 +1 @@
-export { default as Price } from './Price';
+export { default as Price } from './Price';

package/Price/index.js

@@ -1,2 +1,2 @@
-export { default as Price } from './Price';
+export { default as Price } from './Price';
 //# sourceMappingURL=index.js.map

package/ProductLink.d.ts

@@ -1,21 +1,21 @@
-import { Product, Route } from '@jetshop/core/types';
-import * as React from 'react';
-import { LinkProps } from 'react-router-dom';
-export interface ProductLinkProps extends Partial<LinkProps> {
-    /** The full Product returned from the query */
-    product: Product;
-    /** Used for product tracking */
-    index?: number;
-    /** Used for product tracking */
-    list?: string;
-    /** If passed, used to construct the link path. Otherwise use canonical category. */
-    categoryPath?: Route;
-    /**  Optional string to be used as the search string. */
-    search?: string;
-    /**  Optional string to be used as the hash string. */
-    hash?: string;
-    className?: string;
-}
-export declare function getPathWithTrailingSlash(path: string): string;
-declare const ProductLink: React.FC<ProductLinkProps>;
-export default ProductLink;
+import { Product, Route } from '@jetshop/core/types';
+import * as React from 'react';
+import { LinkProps } from 'react-router-dom';
+export interface ProductLinkProps extends Partial<LinkProps> {
+    /** The full Product returned from the query */
+    product: Product;
+    /** Used for product tracking */
+    index?: number;
+    /** Used for product tracking */
+    list?: string;
+    /** If passed, used to construct the link path. Otherwise use canonical category. */
+    categoryPath?: Route;
+    /**  Optional string to be used as the search string. */
+    search?: string;
+    /**  Optional string to be used as the hash string. */
+    hash?: string;
+    className?: string;
+}
+export declare function getPathWithTrailingSlash(path: string): string;
+declare const ProductLink: React.FC<ProductLinkProps>;
+export default ProductLink;

package/ProductLink.js

@@ -1,82 +1,82 @@
-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 { useTracker } from '@jetshop/core/analytics/Analytics';
-import { trackProductEvent } from '@jetshop/core/analytics/tracking';
-import useWarningInDev from '@jetshop/core/hooks/useWarningInDev';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { useLocation } from 'react-router';
-import { useRoutePreload } from '@jetshop/core/hooks/useRoutePreload';
-import { useHoverIntent } from './utils/useHoverIntent';
-import { breadcrumbsWithoutProduct } from '@jetshop/core/analytics/utils/breadcrumbsWithoutProduct';
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-export function getPathWithTrailingSlash(path) {
-    if (path.endsWith('/')) {
-        return path;
-    }
-    else
-        return path + '/';
-}
-const ProductLink = (_a) => {
-    var { product, index, list, children, onClick, categoryPath, search, hash } = _a, rest = __rest(_a, ["product", "index", "list", "children", "onClick", "categoryPath", "search", "hash"]);
-    const track = useTracker();
-    const { preload } = useRoutePreload();
-    useWarningInDev(!product, `You must pass a product to ProductLink`);
-    const location = useLocation();
-    let pathname = '/';
-    const { usePrimaryRouteForProducts } = useShopConfig();
-    const productPreload = () => {
-        preload({
-            pathname,
-            routeType: 'Product'
-        });
-    };
-    const [, intentRef] = useHoverIntent({
-        onHover: () => {
-            productPreload();
-        }
-    });
-    if (!product || !product.primaryRoute) {
-        return React.createElement(React.Fragment, null, children ? children : product.name);
-    }
-    const { primaryRoute, id } = product;
-    pathname =
-        categoryPath && !usePrimaryRouteForProducts
-            ? getPathWithTrailingSlash(categoryPath.path) + primaryRoute.slug
-            : primaryRoute.path;
-    return (React.createElement(Link, Object.assign({}, rest, { onClick: (event) => {
-            var _a;
-            track(trackProductEvent({
-                action: 'click',
-                product,
-                list,
-                index,
-                category: breadcrumbsWithoutProduct((categoryPath === null || categoryPath === void 0 ? void 0 : categoryPath.breadcrumbs) || ((_a = product.primaryRoute) === null || _a === void 0 ? void 0 : _a.breadcrumbs))
-            }));
-            onClick && onClick(event);
-        }, to: {
-            pathname,
-            state: {
-                type: 'Product',
-                id,
-                product: Object.assign(Object.assign({}, product), { inPackages: [], variants: {
-                        options: [],
-                        values: []
-                    }, stockStatus: {} }),
-                list: list || (location.state ? location.state.list : null)
-            },
-            search,
-            hash
-        }, innerRef: intentRef, onTouchStart: productPreload }), children ? children : product.name));
-};
-export default ProductLink;
+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 { useTracker } from '@jetshop/core/analytics/Analytics';
+import { trackProductEvent } from '@jetshop/core/analytics/tracking';
+import useWarningInDev from '@jetshop/core/hooks/useWarningInDev';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router';
+import { useRoutePreload } from '@jetshop/core/hooks/useRoutePreload';
+import { useHoverIntent } from './utils/useHoverIntent';
+import { breadcrumbsWithoutProduct } from '@jetshop/core/analytics/utils/breadcrumbsWithoutProduct';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+export function getPathWithTrailingSlash(path) {
+    if (path.endsWith('/')) {
+        return path;
+    }
+    else
+        return path + '/';
+}
+const ProductLink = (_a) => {
+    var { product, index, list, children, onClick, categoryPath, search, hash } = _a, rest = __rest(_a, ["product", "index", "list", "children", "onClick", "categoryPath", "search", "hash"]);
+    const track = useTracker();
+    const { preload } = useRoutePreload();
+    useWarningInDev(!product, `You must pass a product to ProductLink`);
+    const location = useLocation();
+    let pathname = '/';
+    const { usePrimaryRouteForProducts } = useShopConfig();
+    const productPreload = () => {
+        preload({
+            pathname,
+            routeType: 'Product'
+        });
+    };
+    const [, intentRef] = useHoverIntent({
+        onHover: () => {
+            productPreload();
+        }
+    });
+    if (!product || !product.primaryRoute) {
+        return React.createElement(React.Fragment, null, children ? children : product.name);
+    }
+    const { primaryRoute, id } = product;
+    pathname =
+        categoryPath && !usePrimaryRouteForProducts
+            ? getPathWithTrailingSlash(categoryPath.path) + primaryRoute.slug
+            : primaryRoute.path;
+    return (React.createElement(Link, Object.assign({}, rest, { onClick: (event) => {
+            var _a;
+            track(trackProductEvent({
+                action: 'click',
+                product,
+                list,
+                index,
+                category: breadcrumbsWithoutProduct((categoryPath === null || categoryPath === void 0 ? void 0 : categoryPath.breadcrumbs) || ((_a = product.primaryRoute) === null || _a === void 0 ? void 0 : _a.breadcrumbs))
+            }));
+            onClick && onClick(event);
+        }, to: {
+            pathname,
+            state: {
+                type: 'Product',
+                id,
+                product: Object.assign(Object.assign({}, product), { inPackages: [], variants: {
+                        options: [],
+                        values: []
+                    }, stockStatus: {} }),
+                list: list || (location.state ? location.state.list : null)
+            },
+            search,
+            hash
+        }, innerRef: intentRef, onTouchStart: productPreload }), children ? children : product.name));
+};
+export default ProductLink;
 //# sourceMappingURL=ProductLink.js.map

package/ProductList/Badges.d.ts

@@ -1,6 +1,6 @@
-import { ProductBadge } from '@jetshop/core/types';
-import React from 'react';
-declare const Badges: React.SFC<{
-    badges: ProductBadge[];
-}>;
-export default Badges;
+import { ProductBadge } from '@jetshop/core/types';
+import React from 'react';
+declare const Badges: React.SFC<{
+    badges: ProductBadge[];
+}>;
+export default Badges;

package/ProductList/Badges.js

@@ -1,56 +1,56 @@
-import React from 'react';
-import { cx } from 'linaria';
-import { styled } from 'linaria/react';
-const BadgeWrapper = styled('div') `
-  width: 100%;
-  height: 100%;
-`;
-const BadgeStyle = styled('div') `
-  position: absolute;
-  z-index: 1;
-`;
-const BadgeTopLeftWrapper = styled(BadgeStyle) `
-  top: 0px;
-  left: 0px;
-`;
-const BadgeTopRightWrapper = styled(BadgeStyle) `
-  top: 0px;
-  right: 0px;
-`;
-const BadgeBottomLeftWrapper = styled(BadgeStyle) `
-  bottom: 0px;
-  left: 0px;
-`;
-const BadgeBottomRightWrapper = styled(BadgeStyle) `
-  bottom: 0px;
-  right: 0px;
-`;
-const ProductBadgeComponent = styled('div') `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.with-badge span {
-    position: absolute;
-    z-index: 1;
-  }
-`;
-const Badge = ({ badge }) => {
-    return (React.createElement(ProductBadgeComponent, { className: cx(badge.style, badge.url && 'with-badge') },
-        React.createElement("span", null, badge.text),
-        badge.url && (React.createElement("img", { width: "70", height: "70", src: badge.url, alt: badge.name }))));
-};
-const Badges = ({ badges = [] }) => {
-    if (badges.length === 0)
-        return null;
-    const topLeftBadges = badges.filter((badge) => badge.location === 'TOP_LEFT');
-    const topRightBadges = badges.filter((badge) => badge.location === 'TOP_RIGHT');
-    const bottomLeftBadges = badges.filter((badge) => badge.location === 'BOTTOM_LEFT');
-    const bottomRightBadges = badges.filter((badge) => badge.location === 'BOTTOM_RIGHT');
-    return (React.createElement(BadgeWrapper, null,
-        topLeftBadges.length > 0 && (React.createElement(BadgeTopLeftWrapper, { className: "badge-top-left" }, topLeftBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
-        topRightBadges.length > 0 && (React.createElement(BadgeTopRightWrapper, { className: "badge-top-right" }, topRightBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
-        bottomLeftBadges.length > 0 && (React.createElement(BadgeBottomLeftWrapper, { className: "badge-bottom-left" }, bottomLeftBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
-        bottomRightBadges.length > 0 && (React.createElement(BadgeBottomRightWrapper, { className: "badge-bottom-right" }, bottomRightBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge })))))));
-};
-export default Badges;
+import React from 'react';
+import { cx } from 'linaria';
+import { styled } from 'linaria/react';
+const BadgeWrapper = styled('div') `
+  width: 100%;
+  height: 100%;
+`;
+const BadgeStyle = styled('div') `
+  position: absolute;
+  z-index: 1;
+`;
+const BadgeTopLeftWrapper = styled(BadgeStyle) `
+  top: 0px;
+  left: 0px;
+`;
+const BadgeTopRightWrapper = styled(BadgeStyle) `
+  top: 0px;
+  right: 0px;
+`;
+const BadgeBottomLeftWrapper = styled(BadgeStyle) `
+  bottom: 0px;
+  left: 0px;
+`;
+const BadgeBottomRightWrapper = styled(BadgeStyle) `
+  bottom: 0px;
+  right: 0px;
+`;
+const ProductBadgeComponent = styled('div') `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.with-badge span {
+    position: absolute;
+    z-index: 1;
+  }
+`;
+const Badge = ({ badge }) => {
+    return (React.createElement(ProductBadgeComponent, { className: cx(badge.style, badge.url && 'with-badge') },
+        React.createElement("span", null, badge.text),
+        badge.url && (React.createElement("img", { width: "70", height: "70", src: badge.url, alt: badge.name }))));
+};
+const Badges = ({ badges = [] }) => {
+    if (badges.length === 0)
+        return null;
+    const topLeftBadges = badges.filter((badge) => badge.location === 'TOP_LEFT');
+    const topRightBadges = badges.filter((badge) => badge.location === 'TOP_RIGHT');
+    const bottomLeftBadges = badges.filter((badge) => badge.location === 'BOTTOM_LEFT');
+    const bottomRightBadges = badges.filter((badge) => badge.location === 'BOTTOM_RIGHT');
+    return (React.createElement(BadgeWrapper, null,
+        topLeftBadges.length > 0 && (React.createElement(BadgeTopLeftWrapper, { className: "badge-top-left" }, topLeftBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
+        topRightBadges.length > 0 && (React.createElement(BadgeTopRightWrapper, { className: "badge-top-right" }, topRightBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
+        bottomLeftBadges.length > 0 && (React.createElement(BadgeBottomLeftWrapper, { className: "badge-bottom-left" }, bottomLeftBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge }))))),
+        bottomRightBadges.length > 0 && (React.createElement(BadgeBottomRightWrapper, { className: "badge-bottom-right" }, bottomRightBadges.map((badge) => (React.createElement(Badge, { key: badge.name, badge: badge })))))));
+};
+export default Badges;
 //# sourceMappingURL=Badges.js.map

package/ProductList/GridProduct.d.ts

@@ -1,24 +1,24 @@
-import { Product, Route } from '@jetshop/core/types';
-import React from 'react';
-export declare const ProductWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    as?: React.ElementType<any>;
-}>;
-export declare const ProductBlockLink: import("linaria/lib/StyledMeta").StyledMeta & React.FC<import("@jetshop/ui/ProductLink").ProductLinkProps>;
-export declare const ProductDetails: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    as?: React.ElementType<any>;
-}>;
-export declare const Name: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & {
-    as?: React.ElementType<any>;
-}>;
-export interface GridProductProps {
-    product: Product;
-    categoryPath?: Route;
-    loading?: boolean;
-    imageAspect?: string;
-    className?: string;
-    search?: string;
-    hash?: string;
-    listName?: string;
-}
-declare const GridProduct: React.SFC<GridProductProps>;
-export default GridProduct;
+import { Product, Route } from '@jetshop/core/types';
+import React from 'react';
+export declare const ProductWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const ProductBlockLink: import("linaria/lib/StyledMeta").StyledMeta & React.FC<import("@jetshop/ui/ProductLink").ProductLinkProps>;
+export declare const ProductDetails: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const Name: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & {
+    as?: React.ElementType<any>;
+}>;
+export interface GridProductProps {
+    product: Product;
+    categoryPath?: Route;
+    loading?: boolean;
+    imageAspect?: string;
+    className?: string;
+    search?: string;
+    hash?: string;
+    listName?: string;
+}
+declare const GridProduct: React.SFC<GridProductProps>;
+export default GridProduct;

package/ProductList/GridProduct.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 Image from '@jetshop/ui/Image/Image';
-import { Price } from '@jetshop/ui/Price';
-import ProductLink from '@jetshop/ui/ProductLink';
-import React from 'react';
-import { styled } from 'linaria/react';
-import Badges from './Badges';
-export const ProductWrapper = styled('div') `
-  width: 50%;
-
-  @media (--above-md) {
-    width: 33.333%;
-  }
-  @media (--above-lg) {
-    width: 20%;
-  }
-`;
-export const ProductBlockLink = styled(ProductLink) `
-  text-decoration: none;
-  color: inherit;
-  display: block;
-  margin-right: 1em;
-  margin-left: 1em;
-  margin-bottom: 36px;
-  border: 1px solid #ededed;
-  background-color: white;
-`;
-export const ProductDetails = styled('div') `
-  background-color: white;
-  padding: 8px;
-  max-width: 100%;
-  max-height: 100%;
-`;
-export const Name = styled('p') `
-  font-weight: 600;
-`;
-const GridProduct = (_a) => {
-    var { product, categoryPath, loading, imageAspect = '1:1', className = '', search, hash, listName } = _a, rest = __rest(_a, ["product", "categoryPath", "loading", "imageAspect", "className", "search", "hash", "listName"]);
-    return (React.createElement(ProductWrapper, Object.assign({ "data-testid": "product", className: className }, rest),
-        React.createElement(ProductBlockLink, { list: listName, search: search, hash: hash, product: product, categoryPath: categoryPath, style: { opacity: loading ? 0.5 : 1 } },
-            product.images.length > 0 && (React.createElement(Image, { sizes: [1 / 4, 1 / 3, 1 / 2, 1 / 2], aspect: imageAspect, alt: product.images[0].alt, src: product.images[0].url, badges: React.createElement(Badges, { badges: product.badges }) })),
-            React.createElement(ProductDetails, null,
-                React.createElement(Name, null, product.name),
-                React.createElement("p", { className: "sub-name" }, product.subName),
-                React.createElement(Price, { price: product.price, previousPrice: product.previousPrice })))));
-};
-export default GridProduct;
+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 Image from '@jetshop/ui/Image/Image';
+import { Price } from '@jetshop/ui/Price';
+import ProductLink from '@jetshop/ui/ProductLink';
+import React from 'react';
+import { styled } from 'linaria/react';
+import Badges from './Badges';
+export const ProductWrapper = styled('div') `
+  width: 50%;
+
+  @media (--above-md) {
+    width: 33.333%;
+  }
+  @media (--above-lg) {
+    width: 20%;
+  }
+`;
+export const ProductBlockLink = styled(ProductLink) `
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  margin-right: 1em;
+  margin-left: 1em;
+  margin-bottom: 36px;
+  border: 1px solid #ededed;
+  background-color: white;
+`;
+export const ProductDetails = styled('div') `
+  background-color: white;
+  padding: 8px;
+  max-width: 100%;
+  max-height: 100%;
+`;
+export const Name = styled('p') `
+  font-weight: 600;
+`;
+const GridProduct = (_a) => {
+    var { product, categoryPath, loading, imageAspect = '1:1', className = '', search, hash, listName } = _a, rest = __rest(_a, ["product", "categoryPath", "loading", "imageAspect", "className", "search", "hash", "listName"]);
+    return (React.createElement(ProductWrapper, Object.assign({ "data-testid": "product", className: className }, rest),
+        React.createElement(ProductBlockLink, { list: listName, search: search, hash: hash, product: product, categoryPath: categoryPath, style: { opacity: loading ? 0.5 : 1 } },
+            product.images.length > 0 && (React.createElement(Image, { sizes: [1 / 4, 1 / 3, 1 / 2, 1 / 2], aspect: imageAspect, alt: product.images[0].alt, src: product.images[0].url, badges: React.createElement(Badges, { badges: product.badges }) })),
+            React.createElement(ProductDetails, null,
+                React.createElement(Name, null, product.name),
+                React.createElement("p", { className: "sub-name" }, product.subName),
+                React.createElement(Price, { price: product.price, previousPrice: product.previousPrice })))));
+};
+export default GridProduct;
 //# sourceMappingURL=GridProduct.js.map

package/ProductList/ProductGrid.d.ts

@@ -1,16 +1,16 @@
-import { Product, Route } from '@jetshop/core/types';
-import { GridProductProps } from '@jetshop/ui/ProductList/GridProduct';
-import React from 'react';
-export interface ProductGridProps {
-    className: string;
-    products: Product[];
-    loading: boolean;
-    listName: string;
-    categoryPath: Route | null;
-    ProductComponent: React.SFC<GridProductProps>;
-    search?: string;
-    hash?: string;
-    category?: string;
-}
-declare const ProductGrid: React.SFC<ProductGridProps>;
-export default ProductGrid;
+import { Product, Route } from '@jetshop/core/types';
+import { GridProductProps } from '@jetshop/ui/ProductList/GridProduct';
+import React from 'react';
+export interface ProductGridProps {
+    className: string;
+    products: Product[];
+    loading: boolean;
+    listName: string;
+    categoryPath: Route | null;
+    ProductComponent: React.SFC<GridProductProps>;
+    search?: string;
+    hash?: string;
+    category?: string;
+}
+declare const ProductGrid: React.SFC<ProductGridProps>;
+export default ProductGrid;