@guardian/interactive-component-library 0.3.1 → 0.3.2

package/dist/style.css

@@ -1078,6 +1078,18 @@ button {
 .bg-color--oth {
   background-color: var(--oth) !important;
 }
+.bg-color--ind-dem {
+  background-color: var(--ind-dem) !important;
+}
+.bg-color--lib {
+  background-color: var(--lib) !important;
+}
+.bg-color--grn {
+  background-color: var(--grn) !important;
+}
+.bg-color--ken {
+  background-color: var(--ken) !important;
+}
 .bg-color--dem-2 {
   background-color: var(--dem-2) !important;
 }
@@ -1087,6 +1099,18 @@ button {
 .bg-color--oth-2 {
   background-color: var(--oth-2) !important;
 }
+.bg-color--ind-dem-2 {
+  background-color: var(--ind-dem-2) !important;
+}
+.bg-color--lib-2 {
+  background-color: var(--lib-2) !important;
+}
+.bg-color--grn-2 {
+  background-color: var(--grn-2) !important;
+}
+.bg-color--ken-2 {
+  background-color: var(--ken-2) !important;
+}
 .bg-color--undeclared {
   background-color: var(--undeclared) !important;
 }
@@ -1101,6 +1125,18 @@ button {
 .fill-color--oth {
   fill: var(--oth) !important;
 }
+.fill-color--ind-dem {
+  fill: var(--ind-dem) !important;
+}
+.fill-color--lib {
+  fill: var(--lib) !important;
+}
+.fill-color--grn {
+  fill: var(--grn) !important;
+}
+.fill-color--ken {
+  fill: var(--ken) !important;
+}
 .fill-color--dem-2 {
   fill: var(--dem-2) !important;
 }
@@ -1110,6 +1146,18 @@ button {
 .fill-color--oth-2 {
   fill: var(--oth-2) !important;
 }
+.fill-color--ind-dem-2 {
+  fill: var(--ind-dem-2) !important;
+}
+.fill-color--lib-2 {
+  fill: var(--lib-2) !important;
+}
+.fill-color--grn-2 {
+  fill: var(--grn-2) !important;
+}
+.fill-color--ken-2 {
+  fill: var(--ken-2) !important;
+}
 .fill-color--undeclared {
   fill: var(--undeclared) !important;
 }
@@ -1123,6 +1171,18 @@ button {
 .stop-color--oth {
   stop-color: var(--oth) !important;
 }
+.stop-color--ind-dem {
+  stop-color: var(--ind-dem) !important;
+}
+.stop-color--lib {
+  stop-color: var(--lib) !important;
+}
+.stop-color--grn {
+  stop-color: var(--grn) !important;
+}
+.stop-color--ken {
+  stop-color: var(--ken) !important;
+}
 .stop-color--undeclared {
   stop-color: var(--undeclared) !important;
 }
@@ -1136,6 +1196,18 @@ button {
 .stroke-color--oth {
   stroke: var(--oth) !important;
 }
+.stroke-color--ind-dem {
+  stroke: var(--ind-dem) !important;
+}
+.stroke-color--lib {
+  stroke: var(--lib) !important;
+}
+.stroke-color--grn {
+  stroke: var(--grn) !important;
+}
+.stroke-color--ken {
+  stroke: var(--ken) !important;
+}
 .stroke-color--undeclared {
   stroke: var(--undeclared) !important;
 }
@@ -1273,12 +1345,20 @@ body {
   --undeclared: #ededed;
   --declared: #fff;
   --new-group-01: #333333;
-  --dem: #2f3192;
+  --dem: #093ca3;
   --gop: #c70000;
-  --oth: #848484;
-  --dem-2: #bdbeea;
+  --oth: #707070;
+  --ind-dem: #7378d8;
+  --lib: #c6b716;
+  --grn: #0da498;
+  --ken: #ef6f07;
+  --dem-2: #dad7f5;
   --gop-2: #ffdbd4;
-  --oth-2: #c8c8c8;
+  --oth-2: #e7e7e7;
+  --ind-dem-2: #dad7f5;
+  --lib-2: #f4eac2;
+  --grn-2: #cfedea;
+  --ken-2: #ffe2cd;
   --undeclared: #e7e7e7;
 }
 @media (prefers-color-scheme: dark) {
@@ -1377,12 +1457,20 @@ body {
     --undeclared: #ededed;
     --declared: #bababa;
     --new-group-01: #cccccc;
-    --dem: #3c3eb9;
-    --gop: #dc2e1c;
+    --dem: #3261db;
+    --gop: #c70000;
     --oth: #707070;
-    --dem-2: #292b7f;
-    --gop-2: #833a2b;
+    --ind-dem: #7389d8;
+    --lib: #c6b716;
+    --grn: #23b4a9;
+    --ken: #ef6f07;
+    --dem-2: #20366d;
+    --gop-2: #5a0b0b;
     --oth-2: #333333;
+    --ind-dem-2: #394261;
+    --lib-2: #524d13;
+    --grn-2: #19524e;
+    --ken-2: #6a370e;
     --undeclared: #494949;
   }
 }._svg_b5io0_1 {
@@ -2372,7 +2460,79 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
-._svg_1dms8_1 {
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._path_1cwd5_9 {
+  stroke: var(--secondary-line-color);
+  fill: none;
+}._container_9pdyv_1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+._svg_9pdyv_7 {
+  fill: none;
+  stroke: #121212;
+  stroke-width: 1;
+}
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._mapContainer_1ogf3_9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._helpTextContainer_1ogf3_15 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  background-color: rgba(18, 18, 18, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s linear;
+}
+
+._helpText_1ogf3_15 {
+  margin-top: var(--space-5);
+  font-family: var(--text-sans);
+  font-weight: 700;
+  font-size: var(--sans-large);
+  line-height: var(--sans-line-height);
+  color: #fff !important;
+  margin-bottom: var(--space-3);
+}
+
+._desktopHelpText_1ogf3_40 {
+  display: none;
+}
+
+@media (any-hover: hover) {
+  ._desktopHelpText_1ogf3_40 {
+    display: block;
+  }
+  ._mobileHelpText_1ogf3_48 {
+    display: none;
+  }
+}._svg_1dms8_1 {
   width: 100%;
   height: 100%;
   fill: var(--primary-text-color);
@@ -2817,28 +2977,6 @@ body.android {
 ._checkmarkPath_6u92g_120 {
   fill: var(--primary-text-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._path_1cwd5_9 {
-  stroke: var(--secondary-line-color);
-  fill: none;
-}._container_9pdyv_1 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-._svg_9pdyv_7 {
-  fill: none;
-  stroke: #121212;
-  stroke-width: 1;
-}
 ._zoomControl_13wd1_1 {
   display: inline-flex;
   flex-direction: column;
@@ -2871,57 +3009,7 @@ body.android {
   cursor: auto;
   background-color: var(--tertiary-bg-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._mapContainer_1ogf3_9 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-._helpTextContainer_1ogf3_15 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-  background-color: rgba(18, 18, 18, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 0.2s linear;
-}
-
-._helpText_1ogf3_15 {
-  margin-top: var(--space-5);
-  font-family: var(--text-sans);
-  font-weight: 700;
-  font-size: var(--sans-large);
-  line-height: var(--sans-line-height);
-  color: #fff !important;
-  margin-bottom: var(--space-3);
-}
-
-._desktopHelpText_1ogf3_40 {
-  display: none;
-}
-
-@media (any-hover: hover) {
-  ._desktopHelpText_1ogf3_40 {
-    display: block;
-  }
-  ._mobileHelpText_1ogf3_48 {
-    display: none;
-  }
-}._optionPicker_1b561_1 {
+._optionPicker_1b561_1 {
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;

package/dist/styles/helpers/mergeStyles.d.ts

@@ -0,0 +1 @@
+export function mergeStyles(firstStyle: any, secondStyle: any): any;

package/dist/styles/helpers/mergeStyles.js

@@ -0,0 +1,22 @@
+function mergeStyles(firstStyle, secondStyle) {
+  if (!firstStyle) return secondStyle;
+  if (!secondStyle) return firstStyle;
+  if (typeof firstStyle === "string") {
+    if (typeof secondStyle !== "string") {
+      throw new Error("Styles to merge must be of the same type");
+    }
+    return firstStyle.concat(" ", secondStyle);
+  }
+  const allKeys = /* @__PURE__ */ new Set([
+    ...Object.keys(firstStyle),
+    ...Object.keys(secondStyle)
+  ]);
+  const merged = Array.from(allKeys).reduce((result, key) => {
+    result[key] = mergeStyles(firstStyle[key], secondStyle[key]);
+    return result;
+  }, {});
+  return merged;
+}
+export {
+  mergeStyles
+};

package/dist/styles/helpers/mergeStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/theme.config.d.ts

@@ -0,0 +1,124 @@
+declare namespace _default {
+    let resets: string;
+    let breakpoints: {
+        readonly mobile: 320;
+        readonly mobileMedium: 375;
+        readonly mobileLandscape: 480;
+        readonly phablet: 660;
+        readonly tablet: 740;
+        readonly desktop: 980;
+        readonly leftCol: 1140;
+        readonly wide: 1300;
+    };
+    let space: {
+        readonly 0: 2;
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 20;
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 9: 36;
+        readonly 10: 40;
+        readonly 12: 48;
+        readonly 14: 56;
+        readonly 16: 64;
+        readonly 18: 72;
+        readonly 24: 96;
+    };
+    namespace fontFamily {
+        let sans: string[];
+        let serif: string[];
+        let headline: string[];
+        let titlepiece: string[];
+    }
+    namespace textSizes {
+        let headline_1: {
+            readonly xxxsmall: 17;
+            readonly xxsmall: 20;
+            readonly xsmall: 24;
+            readonly small: 28;
+            readonly medium: 34;
+            readonly large: 42;
+            readonly xlarge: 50;
+        };
+        export { headline_1 as headline };
+        let sans_1: {
+            readonly xxsmall: 12;
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+            readonly large: 20;
+            readonly xlarge: 24;
+            readonly xxlarge: 28;
+            readonly xxxlarge: 34;
+        };
+        export { sans_1 as sans };
+        let titlepiece_1: {
+            readonly small: 42;
+            readonly medium: 50;
+            readonly large: 70;
+        };
+        export { titlepiece_1 as titlepiece };
+        export let body: {
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+        };
+    }
+    namespace lineHeights {
+        let tight: number;
+        let regular: number;
+        let loose: number;
+    }
+    namespace defaultLineHeights {
+        let headline_2: string;
+        export { headline_2 as headline };
+        let sans_2: string;
+        export { sans_2 as sans };
+        let titlepiece_2: string;
+        export { titlepiece_2 as titlepiece };
+        let body_1: string;
+        export { body_1 as body };
+    }
+    namespace colors {
+        let transparent: string;
+        let current: string;
+        let white: string;
+        let neutral: {
+            7: string;
+            10: string;
+            20: string;
+            38: string;
+            46: string;
+            60: string;
+            86: string;
+            93: string;
+            97: string;
+            100: string;
+        };
+        namespace party {
+            let con: string;
+            let lab: string;
+            let ld: string;
+            let ukip: string;
+            let ind: string;
+            let snp: string;
+            let sdlp: string;
+            let pc: string;
+            let sf: string;
+            let dup: string;
+            let green: string;
+            let alliance: string;
+            let uup: string;
+            let reform: string;
+            let other: string;
+        }
+        namespace elex {
+            let nocontrol: string;
+            let undeclared: string;
+        }
+    }
+}
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -11,13 +11,10 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/interactive-component-library.umd.cjs",
-  "module": "./dist/interactive-component-library.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/interactive-component-library.js",
-      "require": "./dist/interactive-component-library.umd.cjs"
-    },
+    ".": "./dist/index.js",
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
@@ -27,17 +24,29 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
-    "build:lib": "vite build",
-    "build:lib:watch": "vite build --watch",
+    "build:lib": "vite build --mode lib",
+    "build:lib:watch": "vite build --mode lib --watch",
     "lint": "eslint .",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "test": "vitest",
     "test:cov": "vitest run --coverage",
-    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies\"",
     "generate:styles": "node scripts/generateStyles.js",
     "prepare": "husky"
   },
+  "dependencies": {
+    "@guardian/source": "^6.1.0",
+    "d3-composite-projections": "^1.4.0",
+    "d3-timer": "^3.0.1",
+    "d3-transition": "^3.0.1",
+    "dayjs": "^1.11.12",
+    "flatbush": "^4.4.0",
+    "preact-transitioning": "^1.4.2",
+    "rbush": "^4.0.0",
+    "rbush-knn": "^4.0.0",
+    "remark-gfm": "^4.0.0"
+  },
   "peerDependencies": {
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",