@guardian/editorial - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0-rc.0

dist/cjs/components/lines/dashed.js

@@ -5,2 +5,3 @@ "use strict";
 const src_foundations_1 = require("@guardian/src-foundations");
+const src_helpers_1 = require("@guardian/src-helpers");
 const thickness = 1;
@@ -12,16 +13,16 @@ const gapHorizontal = 1;
 exports.height = height;
-const dashedSvg = (count, color) => {
-    return encodeURIComponent(`
-	<svg xmlns="http://www.w3.org/2000/svg"
-		width="${width}" height="${viewHeight}"
-		viewBox="0 0 ${width} ${viewHeight}"
-		stroke="${color}"
-		stroke-width="${thickness}"
-	>
-		<path d="M0,${thickness / 2} h${thickness} " />
-	</svg>
-	`);
+const dashedSvg = (color) => {
+    return `
+		<svg xmlns="http://www.w3.org/2000/svg"
+			width="${width}" height="${viewHeight}"
+			viewBox="0 0 ${width} ${viewHeight}"
+			stroke="${color}"
+			stroke-width="${thickness}"
+		>
+			<path d="M0,${thickness / 2} h${thickness} " />
+		</svg>
+	`;
 };
-const dashedImage = (count = 1, color) => `data:image/svg+xml;utf-8,${dashedSvg(count, color)}`;
+const dashedImage = (color) => src_helpers_1.svgBackgroundImage(dashedSvg(color));
 exports.dashedImage = dashedImage;
 //# sourceMappingURL=dashed.js.map

dist/cjs/components/lines/dotted.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dottedImage = exports.height = void 0;
+const src_helpers_1 = require("@guardian/src-helpers");
 const dotRadius = 1;
@@ -21,6 +22,6 @@ const gridSize = 3;
     svg.push(`</svg>`);
-    return encodeURIComponent(svg.join());
+    return svg.join();
 };
-const dottedImage = (count, color) => `data:image/svg+xml,${dottedSvg(count, color)}`;
+const dottedImage = (count, color) => src_helpers_1.svgBackgroundImage(dottedSvg(count, color));
 exports.dottedImage = dottedImage;
 //# sourceMappingURL=dotted.js.map

dist/cjs/components/lines/squiggly.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.squigglyImage = exports.height = void 0;
+const src_helpers_1 = require("@guardian/src-helpers");
 const wavelength = 12;
@@ -24,17 +25,17 @@ const amplitude = 3;
     }
-    return encodeURIComponent(`
-<svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="${wavelength}" height="${exports.height(count)}"
-	viewBox="0 0 ${wavelength} ${exports.height(count)}"
->
-	<g stroke-width="${thickness}" stroke="${color}" fill="none">
-		<path id="squiggle" d="${d}" />
-		${repeatedLines.join()}
-	</g>
-</svg>
-`);
+    return `
+		<svg xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+			width="${wavelength}" height="${exports.height(count)}"
+			viewBox="0 0 ${wavelength} ${exports.height(count)}"
+		>
+			<g stroke-width="${thickness}" stroke="${color}" fill="none">
+				<path id="squiggle" d="${d}" />
+				${repeatedLines.join()}
+			</g>
+		</svg>
+	`;
 };
-const squigglyImage = (count = 4, color) => `data:image/svg+xml;utf-8,${squigglySvg(count, color)}`;
+const squigglyImage = (count = 4, color) => src_helpers_1.svgBackgroundImage(squigglySvg(count, color));
 exports.squigglyImage = squigglyImage;
 //# sourceMappingURL=squiggly.js.map

dist/cjs/components/lines/stories.js

@@ -8,3 +8,3 @@ "use strict";
 exports.default = {
-    title: 'Lines',
+    title: 'Editorial/Lines',
     component: index_1.Lines,
@@ -11,0 +11,0 @@ };

dist/cjs/components/lines/styles.js

@@ -11,17 +11,7 @@ "use strict";
 const straightLines = (count, color) => {
-    const baseStyles = react_1.css `
-		background-image: repeating-linear-gradient(
-			to bottom,
-			${color},
-			${color} 1px,
-			transparent 1px,
-			transparent ${lineGap}
-		);
-		background-repeat: repeat-x;
-		background-position: top;
-	`;
     switch (count) {
         case 1:
             return react_1.css `
-				${baseStyles};
+				background-color: ${color};
+				background-repeat: repeat-x;
 				background-size: 1px;
@@ -31,12 +21,16 @@ height: 1px;
         case 4:
-            return react_1.css `
-				${baseStyles};
-				background-size: 1px calc(${lineGap} * 3 + 1px);
-				height: calc(${lineGap} * 3 + 1px);
-			`;
         case 8:
+        default:
             return react_1.css `
-				${baseStyles};
-				background-size: 1px calc(${lineGap} * 7 + 1px);
-				height: calc(${lineGap} * 7 + 1px);
+				background-image: repeating-linear-gradient(
+					to bottom,
+					${color},
+					${color} 1px,
+					transparent 1px,
+					transparent ${lineGap}
+				);
+				background-repeat: repeat-x;
+				background-position: top;
+				background-size: 1px calc(${lineGap} * ${count - 1} + 1px);
+				height: calc(${lineGap} * ${count - 1} + 1px);
 			`;
@@ -47,3 +41,3 @@ }
 const squigglyLines = (count, color) => react_1.css `
-	background-image: url(${squiggly_1.squigglyImage(count, color)});
+	background-image: ${squiggly_1.squigglyImage(count, color)};
 	background-repeat: repeat-x;
@@ -55,3 +49,3 @@ background-position: left;
 const dottedLines = (count, color) => react_1.css `
-	background-image: url(${dotted_1.dottedImage(count, color)});
+	background-image: ${dotted_1.dottedImage(count, color)};
 	height: ${dotted_1.height(count)}px;
@@ -61,3 +55,3 @@ `;
 const dashedLines = (count, color) => react_1.css `
-	background-image: url(${dashed_1.dashedImage(count, color)});
+	background-image: ${dashed_1.dashedImage(color)};
 	background-repeat: repeat;
@@ -64,0 +58,0 @@ background-position: top center;

dist/esm/components/lines/dashed.js

 import { space } from '@guardian/src-foundations';
+import { svgBackgroundImage } from '@guardian/src-helpers';
 const thickness = 1;
@@ -7,15 +8,15 @@ const gapHorizontal = 1;
 export const height = (count) => viewHeight * (count - 1) + thickness;
-const dashedSvg = (count, color) => {
-    return encodeURIComponent(`
-	<svg xmlns="http://www.w3.org/2000/svg"
-		width="${width}" height="${viewHeight}"
-		viewBox="0 0 ${width} ${viewHeight}"
-		stroke="${color}"
-		stroke-width="${thickness}"
-	>
-		<path d="M0,${thickness / 2} h${thickness} " />
-	</svg>
-	`);
+const dashedSvg = (color) => {
+    return `
+		<svg xmlns="http://www.w3.org/2000/svg"
+			width="${width}" height="${viewHeight}"
+			viewBox="0 0 ${width} ${viewHeight}"
+			stroke="${color}"
+			stroke-width="${thickness}"
+		>
+			<path d="M0,${thickness / 2} h${thickness} " />
+		</svg>
+	`;
 };
-export const dashedImage = (count = 1, color) => `data:image/svg+xml;utf-8,${dashedSvg(count, color)}`;
+export const dashedImage = (color) => svgBackgroundImage(dashedSvg(color));
 //# sourceMappingURL=dashed.js.map

dist/esm/components/lines/dotted.js

@@ -0,1 +1,2 @@
+import { svgBackgroundImage } from '@guardian/src-helpers';
 const dotRadius = 1;
@@ -17,5 +18,5 @@ const gridSize = 3;
     svg.push(`</svg>`);
-    return encodeURIComponent(svg.join());
+    return svg.join();
 };
-export const dottedImage = (count, color) => `data:image/svg+xml,${dottedSvg(count, color)}`;
+export const dottedImage = (count, color) => svgBackgroundImage(dottedSvg(count, color));
 //# sourceMappingURL=dotted.js.map

dist/esm/components/lines/squiggly.js

@@ -0,1 +1,2 @@
+import { svgBackgroundImage } from '@guardian/src-helpers';
 const wavelength = 12;
@@ -20,16 +21,16 @@ const amplitude = 3;
     }
-    return encodeURIComponent(`
-<svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="${wavelength}" height="${height(count)}"
-	viewBox="0 0 ${wavelength} ${height(count)}"
->
-	<g stroke-width="${thickness}" stroke="${color}" fill="none">
-		<path id="squiggle" d="${d}" />
-		${repeatedLines.join()}
-	</g>
-</svg>
-`);
+    return `
+		<svg xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+			width="${wavelength}" height="${height(count)}"
+			viewBox="0 0 ${wavelength} ${height(count)}"
+		>
+			<g stroke-width="${thickness}" stroke="${color}" fill="none">
+				<path id="squiggle" d="${d}" />
+				${repeatedLines.join()}
+			</g>
+		</svg>
+	`;
 };
-export const squigglyImage = (count = 4, color) => `data:image/svg+xml;utf-8,${squigglySvg(count, color)}`;
+export const squigglyImage = (count = 4, color) => svgBackgroundImage(squigglySvg(count, color));
 //# sourceMappingURL=squiggly.js.map

dist/esm/components/lines/stories.js

@@ -5,3 +5,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export default {
-    title: 'Lines',
+    title: 'Editorial/Lines',
     component: Lines,
@@ -8,0 +8,0 @@ };

dist/esm/components/lines/styles.js

@@ -8,17 +8,7 @@ import { css } from '@emotion/react';
 export const straightLines = (count, color) => {
-    const baseStyles = css `
-		background-image: repeating-linear-gradient(
-			to bottom,
-			${color},
-			${color} 1px,
-			transparent 1px,
-			transparent ${lineGap}
-		);
-		background-repeat: repeat-x;
-		background-position: top;
-	`;
     switch (count) {
         case 1:
             return css `
-				${baseStyles};
+				background-color: ${color};
+				background-repeat: repeat-x;
 				background-size: 1px;
@@ -28,12 +18,16 @@ height: 1px;
         case 4:
-            return css `
-				${baseStyles};
-				background-size: 1px calc(${lineGap} * 3 + 1px);
-				height: calc(${lineGap} * 3 + 1px);
-			`;
         case 8:
+        default:
             return css `
-				${baseStyles};
-				background-size: 1px calc(${lineGap} * 7 + 1px);
-				height: calc(${lineGap} * 7 + 1px);
+				background-image: repeating-linear-gradient(
+					to bottom,
+					${color},
+					${color} 1px,
+					transparent 1px,
+					transparent ${lineGap}
+				);
+				background-repeat: repeat-x;
+				background-position: top;
+				background-size: 1px calc(${lineGap} * ${count - 1} + 1px);
+				height: calc(${lineGap} * ${count - 1} + 1px);
 			`;
@@ -43,3 +37,3 @@ }
 export const squigglyLines = (count, color) => css `
-	background-image: url(${squigglyImage(count, color)});
+	background-image: ${squigglyImage(count, color)};
 	background-repeat: repeat-x;
@@ -50,7 +44,7 @@ background-position: left;
 export const dottedLines = (count, color) => css `
-	background-image: url(${dottedImage(count, color)});
+	background-image: ${dottedImage(count, color)};
 	height: ${dottedImageHeight(count)}px;
 `;
 export const dashedLines = (count, color) => css `
-	background-image: url(${dashedImage(count, color)});
+	background-image: ${dashedImage(color)};
 	background-repeat: repeat;
@@ -57,0 +51,0 @@ background-position: top center;

dist/types/components/lines/dashed.d.ts

 import { LineCount } from '.';
 export declare const height: (count: LineCount) => number;
-export declare const dashedImage: (count: 1 | 4 | 8 | undefined, color: string) => string;
+export declare const dashedImage: (color: string) => string;

package.json

 {
   "name": "@guardian/editorial",
-  "version": "3.5.0",
+  "version": "3.6.0-rc.0",
   "license": "Apache-2.0",
@@ -28,3 +28,8 @@ "main": "dist/cjs/index.js",
   },
+  "dependencies": {
+    "@guardian/src-button": "^3.6.0-rc.0",
+    "@guardian/types": "^6.0.0"
+  },
   "devDependencies": {
+    "@guardian/types": "^6.0.0",
     "npm-run-all": "^4.1.5",
@@ -35,5 +40,5 @@ "typescript": "^4.1.3"
     "@emotion/react": "^11.1.2",
-    "@guardian/src-foundations": "^3.5.0",
+    "@guardian/src-foundations": "^3.6.0-rc.0",
     "react": "^17.0.1"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163017

increased by338.76%

Number of package files

77

increased by108.11%

Lines of code

2201

increased by349.18%

Number of medium maintenance alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

3

increased by50%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@guardian/src-button@^3.6.0-rc.0

• + Added@guardian/types@^6.0.0

• + Added@guardian/src-button@3.13.0(transitive)

• + Added@guardian/src-helpers@3.13.0(transitive)

• + Added@guardian/types@6.1.0(transitive)

• + Addedmini-svg-data-uri@1.4.4(transitive)

• + Addedtypescript@3.9.10(transitive)