@guardian/interactive-component-library 0.9.0 → 0.9.1

package/dist/components/molecules/slope-chart/index.js

@@ -32,6 +32,14 @@ const SlopeChart = ({
   }, [lines, y2Label, yScale]);
   styles = mergeStyles({ ...defaultStyles }, styles);
   const chart = /* @__PURE__ */ jsx("svg", { className: styles.svg, width, height, id: svgId, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${padding.left} ${padding.top})`, children: [
+    /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+      "rect",
+      {
+        width: contentWidth,
+        height: contentHeight,
+        className: styles.background
+      }
+    ) }),
     /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${contentHeight})`, children: [
       /* @__PURE__ */ jsx(
         "line",

package/dist/components/molecules/slope-chart/style.module.css.js

@@ -1,13 +1,14 @@
-const slopeChartContainer = "_slopeChartContainer_nmjjj_1";
-const svg = "_svg_nmjjj_5";
-const line = "_line_nmjjj_9";
-const lineWhite = "_lineWhite_nmjjj_14";
-const circle = "_circle_nmjjj_19";
-const label = "_label_nmjjj_23";
-const y1Label = "_y1Label_nmjjj_29";
-const y2Label = "_y2Label_nmjjj_33";
-const axis = "_axis_nmjjj_37";
-const axisLabel = "_axisLabel_nmjjj_42";
+const slopeChartContainer = "_slopeChartContainer_1678z_1";
+const svg = "_svg_1678z_5";
+const line = "_line_1678z_9";
+const lineWhite = "_lineWhite_1678z_14";
+const circle = "_circle_1678z_19";
+const label = "_label_1678z_23";
+const y1Label = "_y1Label_1678z_29";
+const y2Label = "_y2Label_1678z_33";
+const axis = "_axis_1678z_37";
+const axisLabel = "_axisLabel_1678z_42";
+const background = "_background_1678z_46";
 const defaultStyles = {
   slopeChartContainer,
   svg,
@@ -18,11 +19,13 @@ const defaultStyles = {
   y1Label,
   y2Label,
   axis,
-  axisLabel
+  axisLabel,
+  background
 };
 export {
   axis,
   axisLabel,
+  background,
   circle,
   defaultStyles as default,
   label,

package/dist/style.css

@@ -1983,50 +1983,54 @@ body.android {
 
 ._bodyRow_fhbur_58:last-child > ._bodyCell_fhbur_62 {
   border-bottom: 0;
-}._slopeChartContainer_nmjjj_1 {
+}._slopeChartContainer_1678z_1 {
   max-width: 300px;
 }
 
-._svg_nmjjj_5 {
+._svg_1678z_5 {
   overflow: visible;
 }
 
-._line_nmjjj_9 {
+._line_1678z_9 {
   stroke: #121212;
   stroke-width: 2;
 }
 
-._lineWhite_nmjjj_14 {
+._lineWhite_1678z_14 {
   stroke: var(--primary-bg-color);
   stroke-width: 3.25;
 }
 
-._circle_nmjjj_19 {
+._circle_1678z_19 {
   fill: #121212;
 }
 
-._label_nmjjj_23 {
+._label_1678z_23 {
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   fill: var(--primary-text-color);
 }
 
-._y1Label_nmjjj_29 {
+._y1Label_1678z_29 {
   transform: translateX(calc(var(--space-2) * -1));
 }
 
-._y2Label_nmjjj_33 {
+._y2Label_1678z_33 {
   transform: translateX(calc(var(--space-2)));
 }
 
-._axis_nmjjj_37 {
+._axis_1678z_37 {
   stroke: var(--primary-line-color);
   stroke-width: 1;
 }
 
-._axisLabel_nmjjj_42 {
+._axisLabel_1678z_42 {
   transform: translateY(var(--space-1));
 }
+
+._background_1678z_46 {
+  fill: var(--secondary-bg-color);
+}
 ._tooltip_11t5d_1 {
   pointer-events: none;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",