@jetshop/ui 5.13.0 → 5.13.10-0

package/Image/utils/getSrcWithParams.js

@@ -1,29 +1,29 @@
-import { aspectRatioToFraction } from './aspectRatioToFraction';
-export function getSrcWithParams(width, aspect, src, includeViewportSize = true, options = { crop: false, webp: false }, timestamp) {
-    const resizeMethod = options.crop ? 'crop' : 'fit';
-    const gravity = options.gravity;
-    const quality = options.quality;
-    const height = aspect
-        ? Math.round(width * aspectRatioToFraction(aspect))
-        : null;
-    let qstring;
-    if (height) {
-        qstring = `?extend=copy&width=${width}&method=${resizeMethod}&height=${height}`;
-        if (gravity)
-            qstring += `&gravity=${gravity}`;
-    }
-    else {
-        qstring = `?extend=copy&width=${width}&method=resize`;
-    }
-    if (quality)
-        qstring += `&quality=${quality}`;
-    if (options.webp)
-        qstring += `&type=webp`;
-    if (timestamp)
-        qstring += `&timestamp=${timestamp}`;
-    if (options.focalPointX && options.focalPointY) {
-        qstring += `&im=RegionOfInterestCrop=(${width},${height}),style=crop,gravity=Center,regionOfInterest=(anchor=(x=${options.focalPointX},y=${options.focalPointY}),width=${width},height=${height})`;
-    }
-    return src + qstring + `${includeViewportSize ? ` ${width}w` : ''}`;
-}
+import { aspectRatioToFraction } from './aspectRatioToFraction';
+export function getSrcWithParams(width, aspect, src, includeViewportSize = true, options = { crop: false, webp: false }, timestamp) {
+    const resizeMethod = options.crop ? 'crop' : 'fit';
+    const gravity = options.gravity;
+    const quality = options.quality;
+    const height = aspect
+        ? Math.round(width * aspectRatioToFraction(aspect))
+        : null;
+    let qstring;
+    if (height) {
+        qstring = `?extend=copy&width=${width}&method=${resizeMethod}&height=${height}`;
+        if (gravity)
+            qstring += `&gravity=${gravity}`;
+    }
+    else {
+        qstring = `?extend=copy&width=${width}&method=resize`;
+    }
+    if (quality)
+        qstring += `&quality=${quality}`;
+    if (options.webp)
+        qstring += `&type=webp`;
+    if (timestamp)
+        qstring += `&timestamp=${timestamp}`;
+    if (options.focalPointX && options.focalPointY) {
+        qstring += `&im=RegionOfInterestCrop=(${width},${height}),style=crop,gravity=Center,regionOfInterest=(anchor=(x=${options.focalPointX},y=${options.focalPointY}),width=${width},height=${height})`;
+    }
+    return src + qstring + `${includeViewportSize ? ` ${width}w` : ''}`;
+}
 //# sourceMappingURL=getSrcWithParams.js.map

package/Image/utils/paddingForAspectRatio.d.ts

@@ -1 +1 @@
-export declare const paddingForAspectRatio: (aspect?: string) => string;
+export declare const paddingForAspectRatio: (aspect?: string) => string;

package/Image/utils/paddingForAspectRatio.js

@@ -1,6 +1,6 @@
-export const paddingForAspectRatio = (aspect = '1:1') => {
-    const numbers = aspect.split(/[^\d]/).map(Number);
-    const ratio = numbers[1] / numbers[0];
-    return `${(ratio * 100).toFixed(4)}%`;
-};
+export const paddingForAspectRatio = (aspect = '1:1') => {
+    const numbers = aspect.split(/[^\d]/).map(Number);
+    const ratio = numbers[1] / numbers[0];
+    return `${(ratio * 100).toFixed(4)}%`;
+};
 //# sourceMappingURL=paddingForAspectRatio.js.map

package/Image/utils/remToPx.d.ts

@@ -1 +1 @@
-export declare const remToPx: (rems: string, base?: number) => number;
+export declare const remToPx: (rems: string, base?: number) => number;

package/Image/utils/remToPx.js

@@ -1,2 +1,2 @@
-export const remToPx = (rems, base = 16) => parseInt(rems) * base;
+export const remToPx = (rems, base = 16) => parseInt(rems) * base;
 //# sourceMappingURL=remToPx.js.map

package/Image/utils/sizeToNumber.d.ts

@@ -1,2 +1,2 @@
-import { ImageBreakpointSize } from '../Image';
-export declare const sizeToNumber: (size: ImageBreakpointSize) => number;
+import { ImageBreakpointSize } from '../Image';
+export declare const sizeToNumber: (size: ImageBreakpointSize) => number;

package/Image/utils/sizeToNumber.js

@@ -1,27 +1,27 @@
-import { remToPx } from './remToPx';
-const sizeRegexp = new RegExp(/(\d+)\s?(\w+)?/g);
-export const sizeToNumber = (size) => {
-    if (typeof size === 'string') {
-        try {
-            sizeRegexp.lastIndex = 0;
-            const matches = sizeRegexp.exec(size.toLowerCase().trim());
-            const num = matches && matches[1];
-            const unit = matches && matches[2];
-            if ((!unit || unit === 'px') && num) {
-                return +num;
-            }
-            else if (unit === 'rem') {
-                return remToPx(num);
-            }
-            else {
-                throw Error('Unknown unit ' + unit);
-            }
-        }
-        catch (e) {
-            console.error('Responsive Image: Unit conversion failed for', size, e);
-            return 1;
-        }
-    }
-    return size;
-};
+import { remToPx } from './remToPx';
+const sizeRegexp = new RegExp(/(\d+)\s?(\w+)?/g);
+export const sizeToNumber = (size) => {
+    if (typeof size === 'string') {
+        try {
+            sizeRegexp.lastIndex = 0;
+            const matches = sizeRegexp.exec(size.toLowerCase().trim());
+            const num = matches && matches[1];
+            const unit = matches && matches[2];
+            if ((!unit || unit === 'px') && num) {
+                return +num;
+            }
+            else if (unit === 'rem') {
+                return remToPx(num);
+            }
+            else {
+                throw Error('Unknown unit ' + unit);
+            }
+        }
+        catch (e) {
+            console.error('Responsive Image: Unit conversion failed for', size, e);
+            return 1;
+        }
+    }
+    return size;
+};
 //# sourceMappingURL=sizeToNumber.js.map

package/Input/Input.d.ts

@@ -1,6 +1,6 @@
-import React, { InputHTMLAttributes } from 'react';
-declare const TrendInput: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
-    as?: React.ElementType<any>;
-}>;
-export default TrendInput;
-export declare const Quantity: React.SFC<InputHTMLAttributes<HTMLInputElement>>;
+import React, { InputHTMLAttributes } from 'react';
+declare const TrendInput: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
+    as?: React.ElementType<any>;
+}>;
+export default TrendInput;
+export declare const Quantity: React.SFC<InputHTMLAttributes<HTMLInputElement>>;

package/Input/Input.js

@@ -1,45 +1,45 @@
-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 { styled } from 'linaria/react';
-import React from 'react';
-const QuantityWrapper = styled('div') `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-const TrendInput = styled('input') `
-  border: 0.5px solid #bfbdbd;
-  height: 35px;
-  font-size: 20px;
-`;
-export default TrendInput;
-const QuantityInput = styled('input') `
-  border: 1px solid #000000;
-  width: 54px;
-  height: 54px;
-  font-size: 20px;
-  text-align: center;
-  padding: 0px;
-`;
-const QuantityLabel = styled('label') `
-  font-size: 12px;
-  text-align: center;
-  letter-spacing: 0.05em;
-  margin-bottom: 10px;
-`;
-export const Quantity = (_a) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(QuantityWrapper, { className: className },
-        React.createElement(QuantityLabel, null, "Quantity"),
-        React.createElement(QuantityInput, Object.assign({}, rest))));
-};
+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 { styled } from 'linaria/react';
+import React from 'react';
+const QuantityWrapper = styled('div') `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const TrendInput = styled('input') `
+  border: 0.5px solid #bfbdbd;
+  height: 35px;
+  font-size: 20px;
+`;
+export default TrendInput;
+const QuantityInput = styled('input') `
+  border: 1px solid #000000;
+  width: 54px;
+  height: 54px;
+  font-size: 20px;
+  text-align: center;
+  padding: 0px;
+`;
+const QuantityLabel = styled('label') `
+  font-size: 12px;
+  text-align: center;
+  letter-spacing: 0.05em;
+  margin-bottom: 10px;
+`;
+export const Quantity = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(QuantityWrapper, { className: className },
+        React.createElement(QuantityLabel, null, "Quantity"),
+        React.createElement(QuantityInput, Object.assign({}, rest))));
+};
 //# sourceMappingURL=Input.js.map

package/Input/index.d.ts

@@ -1,3 +1,3 @@
-import Input, { Quantity } from './Input';
-export default Input;
-export { Quantity };
+import Input, { Quantity } from './Input';
+export default Input;
+export { Quantity };

package/Input/index.js

@@ -1,4 +1,4 @@
-import Input, { Quantity } from './Input';
-export default Input;
-export { Quantity };
+import Input, { Quantity } from './Input';
+export default Input;
+export { Quantity };
 //# sourceMappingURL=index.js.map

package/JetshopText.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const JetshopText: React.FC;
-export default JetshopText;
+import React from 'react';
+declare const JetshopText: React.FC;
+export default JetshopText;

package/JetshopText.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { styled } from 'linaria/react';
-import t from '@jetshop/intl';
-const SmallText = styled('p') `
-  font-size: 12px;
-`;
-const JetshopText = () => {
-    return (React.createElement(SmallText, null,
-        React.createElement("a", { href: "https://www.jetshop.se" }, t('Powered by Jetshop'))));
-};
-export default JetshopText;
+import React from 'react';
+import { styled } from 'linaria/react';
+import t from '@jetshop/intl';
+const SmallText = styled('p') `
+  font-size: 12px;
+`;
+const JetshopText = () => {
+    return (React.createElement(SmallText, null,
+        React.createElement("a", { href: "https://www.norce.io" }, t('Powered by Norce'))));
+};
+export default JetshopText;
 //# sourceMappingURL=JetshopText.js.map

package/JetshopText.js.map

@@ -1 +1 @@
-{"version":3,"file":"JetshopText.js","sourceRoot":"","sources":["JetshopText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,CAAC,MAAM,eAAe,CAAC;AAE9B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,WAAW,GAAa,GAAG,EAAE;IACjC,OAAO,CACL,oBAAC,SAAS;QACR,2BAAG,IAAI,EAAC,wBAAwB,IAAE,CAAC,CAAC,oBAAoB,CAAC,CAAK,CACpD,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"JetshopText.js","sourceRoot":"","sources":["JetshopText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,CAAC,MAAM,eAAe,CAAC;AAE9B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,WAAW,GAAa,GAAG,EAAE;IACjC,OAAO,CACL,oBAAC,SAAS;QACR,2BAAG,IAAI,EAAC,sBAAsB,IAAE,CAAC,CAAC,kBAAkB,CAAC,CAAK,CAChD,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/Loading/LoadingBar.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { RouteComponentProps } from 'react-router';
-interface LoadingBarProps extends RouteComponentProps {
-    loading: boolean;
-    color: string;
-}
-declare const _default: React.ComponentClass<Pick<LoadingBarProps, "color" | "loading">, any> & import("react-router").WithRouterStatics<React.FC<LoadingBarProps>>;
-export default _default;
+import React from 'react';
+import { RouteComponentProps } from 'react-router';
+interface LoadingBarProps extends RouteComponentProps {
+    loading: boolean;
+    color: string;
+}
+declare const _default: React.ComponentClass<Pick<LoadingBarProps, "color" | "loading">, any> & import("react-router").WithRouterStatics<React.FC<LoadingBarProps>>;
+export default _default;

package/Loading/LoadingBar.js

@@ -1,58 +1,58 @@
-import { NProgress } from '@tanem/react-nprogress';
-import { css, cx } from 'linaria';
-import { styled } from 'linaria/react';
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { withRouter } from 'react-router';
-import { useApolloNetworkStatus } from './NetworkStatusNotifier';
-const canUseDOM = !!(typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement);
-const containerStyles = css `
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 2147483647;
-  opacity: 1;
-  transition: opacity 0.4s ease-out;
-  &.is-finished {
-    opacity: 0;
-  }
-`;
-const Bar = styled('div') `
-  height: 2px;
-  transition: width 0.1s linear;
-`;
-const Container = function Container({ progress, className, color }) {
-    return (React.createElement("div", { className: cx(containerStyles, className) },
-        React.createElement(Bar, { className: "loading-bar", style: {
-                width: `${progress * 100}%`,
-                background: color
-            } })));
-};
-const MemoizedNProgress = React.memo(({ loading, color }) => {
-    return (React.createElement(NProgress, { isAnimating: loading }, ({ isFinished, progress }) => (React.createElement(Container, { progress: progress, className: isFinished && 'is-finished', color: color }))));
-});
-const LoadingBarClient = function LoadingBarClient(props) {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const status = useApolloNetworkStatus({
-        shouldHandleOperation: (operation) => operation.getContext().useNetworkStatusNotifier !== false
-    });
-    return (mounted &&
-        canUseDOM &&
-        ReactDOM.createPortal(React.createElement(MemoizedNProgress, { loading: status.numPendingMutations + status.numPendingQueries > 0, key: props.location.key, color: props.color }), document.getElementById('root')));
-};
-const LoadingBar = function LoadingBar(props) {
-    if (__IN_SERVER__) {
-        return null;
-    }
-    else {
-        return React.createElement(LoadingBarClient, Object.assign({}, props));
-    }
-};
-export default withRouter(LoadingBar);
+import { NProgress } from '@tanem/react-nprogress';
+import { css, cx } from 'linaria';
+import { styled } from 'linaria/react';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { withRouter } from 'react-router';
+import { useApolloNetworkStatus } from './NetworkStatusNotifier';
+const canUseDOM = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+const containerStyles = css `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2147483647;
+  opacity: 1;
+  transition: opacity 0.4s ease-out;
+  &.is-finished {
+    opacity: 0;
+  }
+`;
+const Bar = styled('div') `
+  height: 2px;
+  transition: width 0.1s linear;
+`;
+const Container = function Container({ progress, className, color }) {
+    return (React.createElement("div", { className: cx(containerStyles, className) },
+        React.createElement(Bar, { className: "loading-bar", style: {
+                width: `${progress * 100}%`,
+                background: color
+            } })));
+};
+const MemoizedNProgress = React.memo(({ loading, color }) => {
+    return (React.createElement(NProgress, { isAnimating: loading }, ({ isFinished, progress }) => (React.createElement(Container, { progress: progress, className: isFinished && 'is-finished', color: color }))));
+});
+const LoadingBarClient = function LoadingBarClient(props) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const status = useApolloNetworkStatus({
+        shouldHandleOperation: (operation) => operation.getContext().useNetworkStatusNotifier !== false
+    });
+    return (mounted &&
+        canUseDOM &&
+        ReactDOM.createPortal(React.createElement(MemoizedNProgress, { loading: status.numPendingMutations + status.numPendingQueries > 0, key: props.location.key, color: props.color }), document.getElementById('root')));
+};
+const LoadingBar = function LoadingBar(props) {
+    if (__IN_SERVER__) {
+        return null;
+    }
+    else {
+        return React.createElement(LoadingBarClient, Object.assign({}, props));
+    }
+};
+export default withRouter(LoadingBar);
 //# sourceMappingURL=LoadingBar.js.map

package/Loading/LoadingLine.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-interface LoadingLineProps {
-    /** The color of each line
-     * @default #f5f5f5
-     */
-    color?: string;
-    /** Width in rems
-     * @default 5
-     */
-    widthRem?: number;
-    /**
-     * Rems to randomize the width of each line by. Will randomize on every
-     * render.
-     * @default 0
-     */
-    randomizeWidthBy?: number;
-    /** How many lines to render
-     * @default 1
-     */
-    count?: number;
-    /** The height of each line, in pixels
-     * @default 16
-     */
-    heightPx?: number;
-    /** Optional className to apply to each line */
-    className?: string;
-    style?: any;
-}
-export declare const LoadingLine: React.FC<LoadingLineProps>;
-export declare function randomizeWithinRange(value: number, range: number): number;
-export {};
+import * as React from 'react';
+interface LoadingLineProps {
+    /** The color of each line
+     * @default #f5f5f5
+     */
+    color?: string;
+    /** Width in rems
+     * @default 5
+     */
+    widthRem?: number;
+    /**
+     * Rems to randomize the width of each line by. Will randomize on every
+     * render.
+     * @default 0
+     */
+    randomizeWidthBy?: number;
+    /** How many lines to render
+     * @default 1
+     */
+    count?: number;
+    /** The height of each line, in pixels
+     * @default 16
+     */
+    heightPx?: number;
+    /** Optional className to apply to each line */
+    className?: string;
+    style?: any;
+}
+export declare const LoadingLine: React.FC<LoadingLineProps>;
+export declare function randomizeWithinRange(value: number, range: number): number;
+export {};

package/Loading/LoadingLine.js

@@ -1,26 +1,26 @@
-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';
-export const LoadingLine = React.memo(function LoadingLine(_a) {
-    var { widthRem = 5, randomizeWidthBy = 0, count = 1, color = '#F5F5F5', heightPx = 16, className, children, style } = _a, rest = __rest(_a, ["widthRem", "randomizeWidthBy", "count", "color", "heightPx", "className", "children", "style"]);
-    const times = new Array(count).fill(null);
-    return (React.createElement(React.Fragment, null, times.map((_, index) => (React.createElement("div", Object.assign({}, rest, { key: index, className: className, style: Object.assign({ maxWidth: '100%', background: color, height: `${heightPx}px`, width: `${randomizeWidthBy
-                ? randomizeWithinRange(widthRem, randomizeWidthBy)
-                : widthRem}rem` }, style) }), children)))));
-});
-export function randomizeWithinRange(value, range) {
-    const lowerBound = value - range;
-    const upperBound = value + range;
-    return (Math.round((Math.random() * (upperBound - lowerBound) + lowerBound) * 100) /
-        100);
-}
+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';
+export const LoadingLine = React.memo(function LoadingLine(_a) {
+    var { widthRem = 5, randomizeWidthBy = 0, count = 1, color = '#F5F5F5', heightPx = 16, className, children, style } = _a, rest = __rest(_a, ["widthRem", "randomizeWidthBy", "count", "color", "heightPx", "className", "children", "style"]);
+    const times = new Array(count).fill(null);
+    return (React.createElement(React.Fragment, null, times.map((_, index) => (React.createElement("div", Object.assign({}, rest, { key: index, className: className, style: Object.assign({ maxWidth: '100%', background: color, height: `${heightPx}px`, width: `${randomizeWidthBy
+                ? randomizeWithinRange(widthRem, randomizeWidthBy)
+                : widthRem}rem` }, style) }), children)))));
+});
+export function randomizeWithinRange(value, range) {
+    const lowerBound = value - range;
+    const upperBound = value + range;
+    return (Math.round((Math.random() * (upperBound - lowerBound) + lowerBound) * 100) /
+        100);
+}
 //# sourceMappingURL=LoadingLine.js.map

package/Loading/LoadingLine.test.js

@@ -1,18 +1,18 @@
-import { render } from '@testing-library/react';
-import { LoadingLine, randomizeWithinRange } from './LoadingLine';
-import React from 'react';
-
-describe('LoadingLine', () => {
-  it('renders a div n times defined by `count` prop', () => {
-    const { container } = render(<LoadingLine count={3} />);
-    expect(container.childNodes.length).toBe(3);
-  });
-});
-
-describe('randomizeWithinRange', () => {
-  it('randomizes a number within the given range', () => {
-    const val = randomizeWithinRange(10, 2);
-
-    expect(val <= 12 && val >= 8).toBe(true);
-  });
-});
+import { render } from '@testing-library/react';
+import { LoadingLine, randomizeWithinRange } from './LoadingLine';
+import React from 'react';
+
+describe('LoadingLine', () => {
+  it('renders a div n times defined by `count` prop', () => {
+    const { container } = render(<LoadingLine count={3} />);
+    expect(container.childNodes.length).toBe(3);
+  });
+});
+
+describe('randomizeWithinRange', () => {
+  it('randomizes a number within the given range', () => {
+    const val = randomizeWithinRange(10, 2);
+
+    expect(val <= 12 && val >= 8).toBe(true);
+  });
+});

package/Loading/NetworkStatusNotifier.d.ts

@@ -1,2 +1,2 @@
-declare const link: import("react-apollo-network-status/dist/src/ApolloLinkNetworkStatus").default, useApolloNetworkStatus: (options?: import("react-apollo-network-status/dist/src/useApolloNetworkStatus").UseApolloNetworkStatusOptions) => import("react-apollo-network-status").NetworkStatus;
-export { link, useApolloNetworkStatus };
+declare const link: import("react-apollo-network-status/dist/src/ApolloLinkNetworkStatus").default, useApolloNetworkStatus: (options?: import("react-apollo-network-status/dist/src/useApolloNetworkStatus").UseApolloNetworkStatusOptions) => import("react-apollo-network-status").NetworkStatus;
+export { link, useApolloNetworkStatus };

package/Loading/NetworkStatusNotifier.js

@@ -1,4 +1,4 @@
-import { createNetworkStatusNotifier } from 'react-apollo-network-status';
-const { link, useApolloNetworkStatus } = createNetworkStatusNotifier();
-export { link, useApolloNetworkStatus };
+import { createNetworkStatusNotifier } from 'react-apollo-network-status';
+const { link, useApolloNetworkStatus } = createNetworkStatusNotifier();
+export { link, useApolloNetworkStatus };
 //# sourceMappingURL=NetworkStatusNotifier.js.map