@guardian/interactive-component-library 0.9.0 → 0.9.3

package/dist/components/molecules/page-section/style.module.scss.js

@@ -1,9 +1,9 @@
-const section = "_section_s7ln2_9";
-const fullWidth = "_fullWidth_s7ln2_58";
-const borderLeftCol = "_borderLeftCol_s7ln2_75";
-const header = "_header_s7ln2_82";
-const content = "_content_s7ln2_87";
-const borderTop = "_borderTop_s7ln2_92";
+const section = "_section_1vdz3_9";
+const fullWidth = "_fullWidth_1vdz3_57";
+const borderLeftCol = "_borderLeftCol_1vdz3_74";
+const header = "_header_1vdz3_81";
+const content = "_content_1vdz3_86";
+const borderTop = "_borderTop_1vdz3_91";
 const defaultStyles = {
   section,
   fullWidth,

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;
 }
@@ -2188,14 +2192,14 @@ body.android {
   --top-inset: 58px;
 }
 
-._section_s7ln2_9 {
+._section_1vdz3_9 {
   background-color: var(--background-color);
   display: grid;
   grid-column-gap: 10px;
   grid-row-gap: 10px;
   grid-template-areas: "header" "content";
   --padding: 10px;
-  --bleed: 10px;
+  --bleed: 0px;
   width: calc(100% + var(--bleed) * 2);
   padding-left: var(--padding);
   padding-right: var(--padding);
@@ -2203,75 +2207,74 @@ body.android {
   margin-right: calc(var(--bleed) * -1);
 }
 @media (min-width: 480px) {
-  ._section_s7ln2_9 {
+  ._section_1vdz3_9 {
     --padding: 20px;
-    --bleed: 20px;
-  }
-}
-@media (min-width: 740px) and (max-width: 1140px) {
-  ._section_s7ln2_9 {
-    --bleed: 0px;
   }
 }
 @media (min-width: 980px) {
-  ._section_s7ln2_9 {
+  ._section_1vdz3_9 {
     width: calc(100% + var(--bleed) * 2 - 2px);
     grid-template-columns: 620px;
   }
 }
+@media (min-width: 1140px) {
+  ._section_1vdz3_9 {
+    --bleed: 20px;
+  }
+}
 @media (min-width: 1140px) and (max-width: 1300px) {
-  ._section_s7ln2_9 {
+  ._section_1vdz3_9 {
     margin-left: calc(var(--bleed) * -1 - 1px);
   }
 }
 @media (min-width: 1140px) {
-  ._section_s7ln2_9 {
+  ._section_1vdz3_9 {
     grid-template-columns: 140px 1px 620px 1fr;
     grid-template-areas: "header border content .";
   }
 }
 @media (min-width: 1300px) {
-  ._section_s7ln2_9 {
+  ._section_1vdz3_9 {
     grid-template-columns: 219px 1px 620px;
   }
 }
 
 @media (min-width: 980px) {
-  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+  ._section_1vdz3_9._fullWidth_1vdz3_57 {
     grid-template-columns: 1fr;
   }
 }
 @media (min-width: 1140px) {
-  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+  ._section_1vdz3_9._fullWidth_1vdz3_57 {
     grid-template-columns: 140px 1px 1fr;
     grid-template-areas: "header border content";
   }
 }
 @media (min-width: 1300px) {
-  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+  ._section_1vdz3_9._fullWidth_1vdz3_57 {
     grid-template-columns: 219px 1px 1fr;
   }
 }
 
 @media (min-width: 1140px) {
-  ._section_s7ln2_9._borderLeftCol_s7ln2_75:before {
+  ._section_1vdz3_9._borderLeftCol_1vdz3_74:before {
     content: "";
     grid-area: border;
     border-left: 1px solid var(--border-divider-color);
   }
 }
 
-._header_s7ln2_82 {
+._header_1vdz3_81 {
   padding-top: 10px;
   grid-area: header;
 }
 
-._content_s7ln2_87 {
+._content_1vdz3_86 {
   padding-top: 10px;
   grid-area: content;
 }
 
-._borderTop_s7ln2_92 {
+._borderTop_1vdz3_91 {
   border-top: 1px solid var(--border-divider-color);
 }._text_1ci1k_1 {
   font-family: var(--text-sans);

package/package.json

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