@guardian/interactive-component-library 0.7.12 → 0.7.14

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

@@ -18,6 +18,14 @@ const ColumnChart = ({
   let marginBottom = minValue < 0 ? 0 : 40;
   return /* @__PURE__ */ jsxs("svg", { width: chartWidth, height: chartHeight + marginBottom, children: [
     columns.map((column, index) => {
+      let columnLabel;
+      if (typeof column.label === "string") {
+        columnLabel = column.label;
+      } else if (typeof column.label === "function") {
+        columnLabel = column.label();
+      } else {
+        throw new Error("Invalid column label type");
+      }
       const getHeight = (input) => {
         return yScale(0) - yScale(input);
       };
@@ -40,7 +48,7 @@ const ColumnChart = ({
             className: styles.text,
             x: index * totalColumnWidth + 2,
             y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
-            children: column.label
+            children: columnLabel
           }
         )
       ] }, index);

package/dist/components/molecules/party-profile/index.js

@@ -17,11 +17,13 @@ const PartyProfile = ({
 }) => {
   styles = mergeStyles({ ...defaultStyles }, styles);
   return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx("img", { src: imgSrc, className: styles.img, alt: imgAltText }),
-    /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
-    /* @__PURE__ */ jsx("div", { className: [styles.subtitle, styles[subtitleStyle]].join(" "), children: subtitle }),
-    /* @__PURE__ */ jsx("div", { className: styles.blurb, children: blurb }),
-    /* @__PURE__ */ jsx("div", { className: styles.footnote, children: footnote })
+    /* @__PURE__ */ jsxs("div", { className: styles.copyColumn, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
+      /* @__PURE__ */ jsx("div", { className: [styles.subtitle, styles[subtitleStyle]].join(" "), children: subtitle }),
+      /* @__PURE__ */ jsx("div", { className: styles.blurb, children: blurb }),
+      /* @__PURE__ */ jsx("div", { className: styles.footnote, children: footnote })
+    ] }),
+    /* @__PURE__ */ jsx("img", { src: imgSrc, className: styles.img, alt: imgAltText })
   ] });
 };
 export {

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

@@ -1,12 +1,14 @@
-const container = "_container_hbk39_1";
-const img = "_img_hbk39_5";
-const title = "_title_hbk39_13";
-const subtitle = "_subtitle_hbk39_29";
-const small = "_small_hbk39_39";
-const blurb = "_blurb_hbk39_49";
-const footnote = "_footnote_hbk39_57";
+const container = "_container_1nqng_1";
+const copyColumn = "_copyColumn_1nqng_6";
+const img = "_img_1nqng_10";
+const title = "_title_1nqng_20";
+const subtitle = "_subtitle_1nqng_36";
+const small = "_small_1nqng_46";
+const blurb = "_blurb_1nqng_56";
+const footnote = "_footnote_1nqng_64";
 const defaultStyles = {
   container,
+  copyColumn,
   img,
   title,
   subtitle,
@@ -17,6 +19,7 @@ const defaultStyles = {
 export {
   blurb,
   container,
+  copyColumn,
   defaultStyles as default,
   footnote,
   img,

package/dist/components/molecules/topline-result/index.js

@@ -33,16 +33,10 @@ const ToplineResult = forwardRef(
         onMouseOut,
         ref,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.topRow, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `${styles.primaryname} before-color--${abbreviation}`,
-                children: name
-              }
-            ),
+          /* @__PURE__ */ jsx("div", { className: `${styles.topRow} before-color--${abbreviation}`, children: /* @__PURE__ */ jsxs("span", { className: styles.primaryname, children: [
+            name,
             showInfoButton && /* @__PURE__ */ jsx("span", { className: styles.infoButton, children: /* @__PURE__ */ jsx(InfoButton, { onClick: onInfoPress, ref: infoButtonRef }) })
-          ] }),
+          ] }) }),
           secondaryName && /* @__PURE__ */ jsx("div", { className: styles.subhead, children: /* @__PURE__ */ jsx("span", { className: styles.secondaryname, children: secondaryName }) }),
           /* @__PURE__ */ jsxs("div", { className: `${styles.displayNumbers} ${displayStyle}`, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.mainNumber, children: [

package/dist/components/molecules/topline-result/style.module.scss.js

@@ -1,17 +1,19 @@
-const toplineResult = "_toplineResult_1su0d_9";
-const primaryname = "_primaryname_1su0d_15";
-const secondaryname = "_secondaryname_1su0d_31";
-const name = "_name_1su0d_39";
-const displayNumbers = "_displayNumbers_1su0d_54";
-const mainNumber = "_mainNumber_1su0d_69";
-const mainNumberSuffix = "_mainNumberSuffix_1su0d_75";
-const secondaryNumber = "_secondaryNumber_1su0d_79";
-const displayRow = "_displayRow_1su0d_84";
-const displayColumn = "_displayColumn_1su0d_91";
-const topRow = "_topRow_1su0d_95";
+const toplineResult = "_toplineResult_o4gtd_9";
+const primaryname = "_primaryname_o4gtd_15";
+const infoButton = "_infoButton_o4gtd_27";
+const secondaryname = "_secondaryname_o4gtd_31";
+const name = "_name_o4gtd_39";
+const displayNumbers = "_displayNumbers_o4gtd_54";
+const mainNumber = "_mainNumber_o4gtd_69";
+const mainNumberSuffix = "_mainNumberSuffix_o4gtd_75";
+const secondaryNumber = "_secondaryNumber_o4gtd_79";
+const displayRow = "_displayRow_o4gtd_84";
+const displayColumn = "_displayColumn_o4gtd_91";
+const topRow = "_topRow_o4gtd_95";
 const defaultStyles = {
   toplineResult,
   primaryname,
+  infoButton,
   secondaryname,
   name,
   displayNumbers,
@@ -27,6 +29,7 @@ export {
   displayColumn,
   displayNumbers,
   displayRow,
+  infoButton,
   mainNumber,
   mainNumberSuffix,
   name,

package/dist/style.css

@@ -2074,29 +2074,29 @@ body.android {
   --top-inset: 58px;
 }
 
-._toplineResult_1su0d_9 {
+._toplineResult_o4gtd_9 {
   width: fit-content;
   display: flex;
   flex-direction: column;
 }
 
-._primaryname_1su0d_15 {
+._primaryname_o4gtd_15 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   line-height: var(--headline-line-height);
   font-weight: 500;
   font-style: italic;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
 }
-._primaryname_1su0d_15:before {
-  content: "";
-  height: 4px;
-  width: 2.2em;
-  border-radius: 50px;
-  display: block;
+
+._infoButton_o4gtd_27 {
+  padding-top: var(--space-1);
 }
 
-._secondaryname_1su0d_31 {
+._secondaryname_o4gtd_31 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
@@ -2104,14 +2104,14 @@ body.android {
   line-height: var(--headline-line-height);
 }
 
-._name_1su0d_39 {
+._name_o4gtd_39 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   line-height: var(--headline-line-height);
   font-weight: 500;
 }
-._name_1su0d_39:before {
+._name_o4gtd_39:before {
   content: "";
   height: 4px;
   width: 2.2em;
@@ -2119,7 +2119,7 @@ body.android {
   display: block;
 }
 
-._displayNumbers_1su0d_54 {
+._displayNumbers_o4gtd_54 {
   display: flex;
   align-items: baseline;
   margin-top: auto;
@@ -2130,51 +2130,54 @@ body.android {
   font-feature-settings: "lnum";
   line-height: var(--titlepiece-line-height);
 }
-._displayNumbers_1su0d_54 > div {
+._displayNumbers_o4gtd_54 > div {
   flex-shrink: 0;
 }
 
-._mainNumber_1su0d_69 {
+._mainNumber_o4gtd_69 {
   color: var(--primary-text-color);
   font-size: var(--titlepiece-xsmall);
   white-space: nowrap;
 }
 
-._mainNumberSuffix_1su0d_75 {
+._mainNumberSuffix_o4gtd_75 {
   font-size: var(--titlepiece-xxxsmall);
 }
 
-._secondaryNumber_1su0d_79 {
+._secondaryNumber_o4gtd_79 {
   color: var(--secondary-text-color-alt);
   font-size: var(--titlepiece-xxsmall);
 }
 
-._displayRow_1su0d_84 {
+._displayRow_o4gtd_84 {
   flex-direction: row;
 }
-._displayRow_1su0d_84 ._mainNumber_1su0d_69 {
+._displayRow_o4gtd_84 ._mainNumber_o4gtd_69 {
   margin-right: var(--space-0);
 }
 
-._displayColumn_1su0d_91 {
+._displayColumn_o4gtd_91 {
   flex-direction: column;
 }
 
-._topRow_1su0d_95 {
+._topRow_o4gtd_95 {
   width: fit-content;
   padding-bottom: 1px;
-  display: flex;
-  flex-direction: row;
   column-gap: var(--space-1);
   align-items: flex-end;
 }
 @media (min-width: 61.25em) {
-  ._topRow_1su0d_95 {
+  ._topRow_o4gtd_95 {
     border-bottom: none;
   }
 }
-._topRow_1su0d_95 > * {
+._topRow_o4gtd_95:before {
+  content: "";
+  height: 4px;
+  width: 2.2em;
+  border-radius: 50px;
   display: block;
+  margin-bottom: 2px;
 }body {
   --top-inset: 0;
 }
@@ -2390,24 +2393,31 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
 
 ._bar_1ci1k_10 {
 }
-._container_hbk39_1 {
+._container_1nqng_1 {
   font-weight: 700;
+  display: flex;
 }
 
-._img_hbk39_5 {
-  height: 140px;
-  width: 140px;
+._copyColumn_1nqng_6 {
+  display: block;
+}
+
+._img_1nqng_10 {
+  height: 130px;
+  width: 130px;
   border-radius: 50%;
   float: right;
+  margin-top: var(--space-1);
   margin-left: var(--space-2);
+  margin-right: var(--space-1);
 }
 
-._title_hbk39_13 {
+._title_1nqng_20 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
   font-weight: 500;
-  line-height: 1.1;
+  line-height: 1.2;
 
   &:before {
     content: "";
@@ -2418,17 +2428,17 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   }
 }
 
-._subtitle_hbk39_29 {
+._subtitle_1nqng_36 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
-  line-height: var(--body-line-height);
+  line-height: 1.2;
   font-style: italic;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-._small_hbk39_39 {
+._small_1nqng_46 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2438,7 +2448,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   margin-top: var(--space-1);
 }
 
-._blurb_hbk39_49 {
+._blurb_1nqng_56 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2446,7 +2456,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   font-weight: 300;
 }
 
-._footnote_hbk39_57 {
+._footnote_1nqng_64 {
   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.7.12",
+  "version": "0.7.14",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",