@guardian/interactive-component-library 0.8.9 → 0.9.1

package/dist/components/molecules/party-profile/style.module.css.js

@@ -1,11 +1,11 @@
-const container = "_container_1jf3s_1";
-const copyColumn = "_copyColumn_1jf3s_6";
-const img = "_img_1jf3s_11";
-const title = "_title_1jf3s_22";
-const subtitle = "_subtitle_1jf3s_38";
-const small = "_small_1jf3s_48";
-const blurb = "_blurb_1jf3s_58";
-const footnote = "_footnote_1jf3s_66";
+const container = "_container_15sjw_1";
+const copyColumn = "_copyColumn_15sjw_6";
+const img = "_img_15sjw_10";
+const title = "_title_15sjw_21";
+const subtitle = "_subtitle_15sjw_37";
+const small = "_small_15sjw_47";
+const blurb = "_blurb_15sjw_57";
+const footnote = "_footnote_15sjw_65";
 const defaultStyles = {
   container,
   copyColumn,

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;
 }
@@ -2284,17 +2288,16 @@ body.android {
 
 ._bar_1ci1k_10 {
 }
-._container_1jf3s_1 {
+._container_15sjw_1 {
   font-weight: 700;
   display: flex;
 }
 
-._copyColumn_1jf3s_6 {
+._copyColumn_15sjw_6 {
   display: block;
-  flex-shrink: 0;
 }
 
-._img_1jf3s_11 {
+._img_15sjw_10 {
   height: 130px;
   width: 130px;
   border-radius: 50%;
@@ -2305,7 +2308,7 @@ body.android {
   flex-shrink: 0;
 }
 
-._title_1jf3s_22 {
+._title_15sjw_21 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
@@ -2321,7 +2324,7 @@ body.android {
   }
 }
 
-._subtitle_1jf3s_38 {
+._subtitle_15sjw_37 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
@@ -2331,7 +2334,7 @@ body.android {
   margin-bottom: 6px;
 }
 
-._small_1jf3s_48 {
+._small_15sjw_47 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2341,7 +2344,7 @@ body.android {
   margin-top: var(--space-1);
 }
 
-._blurb_1jf3s_58 {
+._blurb_15sjw_57 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2349,7 +2352,7 @@ body.android {
   font-weight: 300;
 }
 
-._footnote_1jf3s_66 {
+._footnote_15sjw_65 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);

package/package.json

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