@guardian/interactive-component-library 0.5.2 → 0.5.4

package/dist/components/molecules/canvas-map/lib/styles/Text.d.ts

@@ -1,3 +1,40 @@
+/**
+ * TODO: add leader 'style' option, e.g. kink, direct, manhattan, etc.
+ *
+ * @typedef CalloutOptions
+ * @property {{ x: number, y: number }} offsetBy { x, y } offset in pixels, relative to the text position.
+ *
+ * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+ * @property {number} [leaderGap=5] Distance in pixels between the leader line and the text
+ * @property {string} [leaderColor="#121212"] Hex colour of the leader line
+ * @property {number} [leaderWidth=1] Stroke width of the leader line
+ */
+/**
+ * @typedef IconOptions
+ *
+ * @property {"circle"} [shape="circle"]
+ * Shape of the icon.
+ *
+ * TODO: add more shapes?
+ * @property {"left" | "right" | "center" } [position="left"] Position of the icon relative to the text.
+ *
+ * If "center", the icon is placed exactly on the text's coordinates. Use the `anchor` and
+ * `radialOffset` properties of `Text` to place the text relative to the icon.
+ * place the text relative to the icon.
+ * Position of the icon relative to the text
+ * @property {number} [size=10]
+ * Size of the icon in pixels
+ * @property {number} [padding]
+ * Distance in pixels between the icon and the text
+ * @property {string} [color]
+ * Hex colour of the icon, e.g. "#ff0000"
+ *
+ * For more advanced styling, use the `style` property.
+ * @property {import('../styles/Style').Style} [style]
+ * Style of the icon.
+ *
+ * Note that `stroke.position: "inside"` is not currently supported.
+ */
 /**
  * @typedef TextStyle
  * @property {string} content - The text to render
@@ -10,28 +47,36 @@
  * @property {string} [fontSize="17px"] - The font size of the text
  * @property {string} [fontWeight="400"] - The font weight of the text
  * @property {number} [radialOffset=0] - The radial offset of the text in ems
+ * @property {CalloutOptions} [callout] Options for offsetting the text and drawing a leader line.
+ *
+ * If not provided, no leader line is drawn.
+ * @property {IconOptions} [icon] Options for a simple icon displayed next to the text.
+ *
+ * If not provided, no icon is drawn.
  */
 /**
  * Class that represents a text style
- * @type Text
+ * @class
  * @implements {TextStyle}
  */
 export class Text implements TextStyle {
     /**
      * Create a text element style
      * @constructor
-     * @param {TextStyle} [options] - Style options
+     * @param {TextStyle} [options] Style options
      */
     constructor(options?: TextStyle);
-    content: any;
-    anchor: any;
-    fontFamily: any;
-    fontSize: any;
-    fontWeight: any;
-    lineHeight: any;
-    color: any;
-    textShadow: any;
-    radialOffset: any;
+    content: string;
+    anchor: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: number;
+    color: string;
+    textShadow: string;
+    radialOffset: number;
+    callout: CalloutOptions;
+    icon: IconOptions;
     /**
      * Get the relative translation for the text element based on its anchor. The translation does not take `radialOffset` into account
      * @private
@@ -56,6 +101,112 @@ export class Text implements TextStyle {
      */
     getTransform(elementWidth: number, elementHeight: number): string;
 }
+/**
+ * TODO: add leader 'style' option, e.g. kink, direct, manhattan, etc.
+ */
+export type CalloutOptions = {
+    /**
+     * { x, y } offset in pixels, relative to the text position.
+     *
+     * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+     */
+    /**
+     * { x, y } offset in pixels, relative to the text position.
+     *
+     * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+     */
+    offsetBy: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Distance in pixels between the leader line and the text
+     */
+    /**
+     * Distance in pixels between the leader line and the text
+     */
+    leaderGap?: number;
+    /**
+     * Hex colour of the leader line
+     */
+    /**
+     * Hex colour of the leader line
+     */
+    leaderColor?: string;
+    /**
+     * Stroke width of the leader line
+     */
+    /**
+     * Stroke width of the leader line
+     */
+    leaderWidth?: number;
+};
+export type IconOptions = {
+    /**
+     * Shape of the icon.
+     *
+     * TODO: add more shapes?
+     */
+    /**
+     * Shape of the icon.
+     *
+     * TODO: add more shapes?
+     */
+    shape?: "circle";
+    /**
+     * Position of the icon relative to the text.
+     *
+     * If "center", the icon is placed exactly on the text's coordinates. Use the `anchor` and
+     * `radialOffset` properties of `Text` to place the text relative to the icon.
+     * place the text relative to the icon.
+     * Position of the icon relative to the text
+     */
+    /**
+     * Position of the icon relative to the text.
+     *
+     * If "center", the icon is placed exactly on the text's coordinates. Use the `anchor` and
+     * `radialOffset` properties of `Text` to place the text relative to the icon.
+     * place the text relative to the icon.
+     * Position of the icon relative to the text
+     */
+    position?: "left" | "right" | "center";
+    /**
+     * Size of the icon in pixels
+     */
+    /**
+     * Size of the icon in pixels
+     */
+    size?: number;
+    /**
+     * Distance in pixels between the icon and the text
+     */
+    /**
+     * Distance in pixels between the icon and the text
+     */
+    padding?: number;
+    /**
+     * Hex colour of the icon, e.g. "#ff0000"
+     *
+     * For more advanced styling, use the `style` property.
+     */
+    /**
+     * Hex colour of the icon, e.g. "#ff0000"
+     *
+     * For more advanced styling, use the `style` property.
+     */
+    color?: string;
+    /**
+     * Style of the icon.
+     *
+     * Note that `stroke.position: "inside"` is not currently supported.
+     */
+    /**
+     * Style of the icon.
+     *
+     * Note that `stroke.position: "inside"` is not currently supported.
+     */
+    style?: import('../styles/Style').Style;
+};
 export type TextStyle = {
     /**
      * - The text to render
@@ -127,6 +278,28 @@ export type TextStyle = {
      * - The radial offset of the text in ems
      */
     radialOffset?: number;
+    /**
+     * Options for offsetting the text and drawing a leader line.
+     *
+     * If not provided, no leader line is drawn.
+     */
+    /**
+     * Options for offsetting the text and drawing a leader line.
+     *
+     * If not provided, no leader line is drawn.
+     */
+    callout?: CalloutOptions;
+    /**
+     * Options for a simple icon displayed next to the text.
+     *
+     * If not provided, no icon is drawn.
+     */
+    /**
+     * Options for a simple icon displayed next to the text.
+     *
+     * If not provided, no icon is drawn.
+     */
+    icon?: IconOptions;
 };
 /**
  * *

package/dist/components/molecules/canvas-map/lib/styles/Text.js

@@ -13,9 +13,10 @@ class Text {
   /**
    * Create a text element style
    * @constructor
-   * @param {TextStyle} [options] - Style options
+   * @param {TextStyle} [options] Style options
    */
   constructor(options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     this.content = options == null ? void 0 : options.content;
     this.anchor = (options == null ? void 0 : options.anchor) || TextAnchor.CENTER;
     this.fontFamily = (options == null ? void 0 : options.fontFamily) || "var(--text-sans)";
@@ -23,8 +24,22 @@ class Text {
     this.fontWeight = (options == null ? void 0 : options.fontWeight) || "400";
     this.lineHeight = (options == null ? void 0 : options.lineHeight) || 1.3;
     this.color = (options == null ? void 0 : options.color) || "#121212";
-    this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
+    this.textShadow = (options == null ? void 0 : options.textShadow) ?? "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
     this.radialOffset = (options == null ? void 0 : options.radialOffset) || 0;
+    if (options.callout) {
+      this.callout = options.callout;
+      (_a = this.callout).offsetBy ?? (_a.offsetBy = { x: 0, y: 0 });
+      (_b = this.callout).leaderGap ?? (_b.leaderGap = 5);
+      (_c = this.callout).leaderColor ?? (_c.leaderColor = "#121212");
+      (_d = this.callout).leaderWidth ?? (_d.leaderWidth = 1);
+    }
+    if (options.icon) {
+      this.icon = options.icon;
+      (_e = this.icon).shape ?? (_e.shape = "circle");
+      (_f = this.icon).position ?? (_f.position = "left");
+      (_g = this.icon).size ?? (_g.size = 10);
+      (_h = this.icon).padding ?? (_h.padding = 5);
+    }
   }
   /**
    * Get the relative translation for the text element based on its anchor. The translation does not take `radialOffset` into account
@@ -65,7 +80,7 @@ class Text {
     const translate = this._getRelativeTranslation();
     let x = translate.x / 100 * elementWidth;
     let y = translate.y / 100 * elementHeight;
-    const radialOffsetInPixels = this.radialOffset * this.fontSize.replace("px", "");
+    const radialOffsetInPixels = this.radialOffset * parseInt(this.fontSize.replace("px", ""));
     switch (this.anchor) {
       case TextAnchor.TOP:
         y += radialOffsetInPixels;

package/dist/components/molecules/result-summary/index.d.ts

@@ -1,8 +1,10 @@
-export function ResultSummary({ previous, next, title, text, timestamp, styles, }: {
+export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, styles, }: {
     previous: any;
     next: any;
     title: any;
     text: any;
     timestamp: any;
+    onClick: any;
+    isSlim?: boolean;
     styles: any;
 }): import("preact").JSX.Element;

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

@@ -6,7 +6,9 @@ import { ControlChange } from "../control-change/index.js";
 import "../topline-result/index.js";
 import "../page-section/index.js";
 import "d3-scale";
+import { GradientIcon } from "../../particles/gradient-icon/index.js";
 import "../../particles/info-button/index.js";
+import { CircleIcon } from "../../particles/circle-icon/index.js";
 import { RelativeTimeSentence } from "../../particles/relative-time-sentence/index.js";
 import defaultStyles from "./style.module.css.js";
 import "preact";
@@ -26,14 +28,45 @@ function ResultSummary({
   title,
   text,
   timestamp,
+  onClick,
+  isSlim = false,
   styles
 }) {
   styles = mergeStyles({ ...defaultStyles }, styles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
-    /* @__PURE__ */ jsx("p", { className: styles.paragraph, children: text }),
-    /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
-  ] });
+  if (isSlim) {
+    let hasChanged = next !== previous;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.container} ${styles.containerSlim}`,
+        onClick,
+        children: [
+          hasChanged ? /* @__PURE__ */ jsx(
+            GradientIcon,
+            {
+              previous,
+              next,
+              styles: {
+                previous: styles.previous,
+                next: styles.next
+              }
+            }
+          ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
+          /* @__PURE__ */ jsxs("p", { className: styles.titleSlim, children: [
+            title,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
+      /* @__PURE__ */ jsx("p", { className: styles.paragraph, children: text }),
+      /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
+    ] });
+  }
 }
 export {
   ResultSummary

package/dist/components/molecules/result-summary/style.module.css.js

@@ -1,11 +1,20 @@
-const container = "_container_azu4a_1";
-const paragraph = "_paragraph_azu4a_12";
+const container = "_container_14h9i_1";
+const containerSlim = "_containerSlim_14h9i_12";
+const titleSlim = "_titleSlim_14h9i_17";
+const dateStampLinePosition = "_dateStampLinePosition_14h9i_27";
+const paragraph = "_paragraph_14h9i_31";
 const defaultStyles = {
   container,
+  containerSlim,
+  titleSlim,
+  dateStampLinePosition,
   paragraph
 };
 export {
   container,
+  containerSlim,
+  dateStampLinePosition,
   defaultStyles as default,
-  paragraph
+  paragraph,
+  titleSlim
 };

package/dist/style.css

@@ -2443,7 +2443,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   color: var(--primary-text-color);
   margin-top: var(--space-2);
 }
-._container_azu4a_1 {
+._container_14h9i_1 {
   background-color: var(--quaternary-bg-color);
   border-radius: 4px;
   padding: 4px 8px 6px 8px;
@@ -2454,7 +2454,26 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   height: 100%;
 }
 
-._paragraph_azu4a_12 {
+._containerSlim_14h9i_12 {
+  min-width: 260px;
+  display: inline-block;
+}
+
+._titleSlim_14h9i_17 {
+  display: inline;
+  color: var(--primary-text-color) !important;
+  font-family: var(--text-sans) !important;
+  font-size: var(--sans-small) !important;
+  line-height: var(--sans-line-height) !important;
+  font-weight: 700 !important;
+  margin-left: var(--space-1) !important;
+}
+
+._dateStampLinePosition_14h9i_27 {
+  display: block;
+}
+
+._paragraph_14h9i_31 {
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);

package/package.json

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