@guardian/interactive-component-library 0.3.1 → 0.3.2

package/dist/components/molecules/table/useTable.js

@@ -0,0 +1,128 @@
+import { useMemo } from "preact/hooks";
+const sortAscending = (accessor) => {
+  return (a, b) => {
+    const valueA = a[accessor];
+    const valueB = b[accessor];
+    if (valueA === null) {
+      return -1;
+    } else if (valueB === null) {
+      return 1;
+    }
+    if (valueA < valueB) return -1;
+    if (valueA > valueB) return 1;
+    return 0;
+  };
+};
+const sortDescending = (accessor) => {
+  return (a, b) => {
+    const valueA = a[accessor];
+    const valueB = b[accessor];
+    if (valueA === null) {
+      return 1;
+    } else if (valueB === null) {
+      return -1;
+    }
+    if (valueA > valueB) return -1;
+    if (valueA < valueB) return 1;
+    return 0;
+  };
+};
+function useTable({ columns, data, sortState }) {
+  const sortedData = useMemo(() => {
+    if (sortState.columnIndex < 0) {
+      return data;
+    }
+    const dataCopy = new Array(...data);
+    const column = columns[sortState.columnIndex];
+    const sortFunction = sortState.ascending ? sortAscending(column.accessor) : sortDescending(column.accessor);
+    dataCopy.sort(sortFunction);
+    return dataCopy;
+  }, [columns, data, sortState]);
+  const columnModels = useMemo(() => {
+    return columns.map((column, columnIndex) => {
+      const isSorted = sortState.columnIndex === columnIndex && sortState;
+      return new ColumnModel(columnIndex, column, isSorted);
+    });
+  }, [columns, sortState]);
+  const rowModels = useMemo(() => {
+    return sortedData.map((d, rowIndex) => {
+      const cells = columnModels.map((column, columnIndex) => {
+        return new CellModel(column, columnIndex, d, column.cell);
+      });
+      return new RowModel(rowIndex, cells);
+    });
+  }, [columnModels, sortedData]);
+  return {
+    columns: columnModels,
+    rows: rowModels
+  };
+}
+class ColumnModel {
+  constructor(index, definition, isSorted) {
+    this.index = index;
+    this.definition = definition;
+    this.isSorted = isSorted;
+    this.defaultValue = definition.defaultValue;
+  }
+  get id() {
+    return this.definition.id || this.header;
+  }
+  get accessor() {
+    return this.definition.accessor;
+  }
+  get header() {
+    return this.definition.header;
+  }
+  get headerProps() {
+    return {
+      text: this.header,
+      sortable: this.definition.sortable,
+      isSorted: this.isSorted,
+      ...this.headerCellStyle
+    };
+  }
+  get cell() {
+    return this.definition.cell;
+  }
+  get styles() {
+    return this.definition.styles;
+  }
+}
+class RowModel {
+  constructor(index, cells) {
+    this.index = index;
+    this.cells = cells;
+  }
+  get id() {
+    return this.index;
+  }
+}
+class CellModel {
+  constructor(column, columnIndex, row, cell) {
+    this.column = column;
+    this.columnIndex = columnIndex;
+    this.row = row;
+    this.cell = cell;
+  }
+  get id() {
+    return this.columnIndex;
+  }
+  get displayValue() {
+    if (this.cell) {
+      return this.cell(this.row);
+    }
+    if (!Object.prototype.hasOwnProperty.call(this.row, this.column.accessor)) {
+      if (this.column.defaultValue) {
+        return this.column.defaultValue.toString();
+      }
+      const rowData = JSON.stringify(this.row, null, 2);
+      throw new Error(
+        `Missing value for key ${this.column.accessor} in ${rowData}`
+      );
+    }
+    return this.row[this.column.accessor] !== null ? this.row[this.column.accessor].toString() : "null";
+  }
+}
+export {
+  useTable
+};

package/dist/components/molecules/tooltip/index.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @typedef {Object} Point
+ * @property {number} x
+ * @property {number} y
+ */
+/**
+ * @typedef {Object} Rect
+ * @property {number} x
+ * @property {number} y
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} TooltipProps
+ * @property {Element} for - The element to which the tooltip should be positioned.
+ * @property {Point} [positionInTarget] - The position of the tooltip within the target element.
+ * @property {Rect} [touchRect] - The position of the touch event that triggered the tooltip.
+ * @property {boolean} [show] - Whether the tooltip should be shown or not.
+ * @property {Object} [styles] - Additional styles to be applied to the tooltip.
+ * @property {React.ReactNode} children - The content to be displayed inside the tooltip.
+ */
+/**
+ * A tooltip component that displays content at a specific position relative to a target element.
+ *
+ * @param {TooltipProps} props
+ * @returns {JSX.Element}
+ */
+export function Tooltip({ for: targetElement, touchRect, positionInTarget, show, styles, children, }: TooltipProps): JSX.Element;
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type TooltipProps = {
+    /**
+     * - The element to which the tooltip should be positioned.
+     */
+    /**
+     * - The element to which the tooltip should be positioned.
+     */
+    for: Element;
+    /**
+     * - The position of the tooltip within the target element.
+     */
+    /**
+     * - The position of the tooltip within the target element.
+     */
+    positionInTarget?: Point;
+    /**
+     * - The position of the touch event that triggered the tooltip.
+     */
+    /**
+     * - The position of the touch event that triggered the tooltip.
+     */
+    touchRect?: Rect;
+    /**
+     * - Whether the tooltip should be shown or not.
+     */
+    /**
+     * - Whether the tooltip should be shown or not.
+     */
+    show?: boolean;
+    /**
+     * - Additional styles to be applied to the tooltip.
+     */
+    /**
+     * - Additional styles to be applied to the tooltip.
+     */
+    styles?: any;
+    /**
+     * - The content to be displayed inside the tooltip.
+     */
+    /**
+     * - The content to be displayed inside the tooltip.
+     */
+    children: React.ReactNode;
+};

package/dist/components/molecules/tooltip/index.js

@@ -0,0 +1,117 @@
+import { jsx } from "preact/jsx-runtime";
+import { useState, useRef, useEffect, useLayoutEffect } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import { rectsIntersect } from "../../../shared/helpers/geometry.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function Tooltip({
+  for: targetElement,
+  touchRect,
+  positionInTarget,
+  show = true,
+  styles,
+  children
+}) {
+  if (!targetElement) throw new Error("Target for tooltip cannot be undefined");
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [displayElement, setDisplayElement] = useState(null);
+  const tooltipRef = useRef();
+  styles = mergeStyles(defaultStyles, styles);
+  useEffect(() => {
+    setDisplayElement(document.querySelector("body"));
+    return () => {
+      setDisplayElement(null);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!tooltipRef.current) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    if (positionInTarget) {
+      const newPosition = tooltipPositionForPoint({
+        targetRect,
+        positionInTarget,
+        tooltip: tooltipRef.current,
+        displayElement
+      });
+      setTooltipPosition(newPosition);
+    } else if (!positionInTarget) {
+      const newPosition = tooltipPositionForRect({
+        targetRect,
+        touchRect,
+        tooltip: tooltipRef.current,
+        displayElement
+      });
+      setTooltipPosition(newPosition);
+    }
+  }, [targetElement, positionInTarget, displayElement, tooltipRef, touchRect]);
+  if (!displayElement) return;
+  const fixedStyle = {
+    display: show ? "block" : "none",
+    position: "fixed",
+    left: tooltipPosition.x,
+    top: tooltipPosition.y,
+    zIndex: 100
+  };
+  const tooltip = /* @__PURE__ */ jsx("div", { ref: tooltipRef, className: styles.tooltip, style: fixedStyle, children });
+  return createPortal(tooltip, displayElement);
+}
+function tooltipPositionForPoint({
+  targetRect,
+  positionInTarget,
+  tooltip,
+  displayElement
+}) {
+  const newPosition = {
+    x: positionInTarget.x + targetRect.x,
+    y: positionInTarget.y + targetRect.y
+  };
+  const tooltipWidth = tooltip.offsetWidth;
+  const tooltipHeight = tooltip.offsetHeight;
+  const displayElementRect = displayElement.getBoundingClientRect();
+  if (newPosition.x + tooltipWidth > displayElementRect.right) {
+    newPosition.x -= tooltipWidth;
+  }
+  if (newPosition.y + tooltipHeight > displayElementRect.bottom) {
+    newPosition.y -= tooltipHeight;
+  }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
+  return newPosition;
+}
+function tooltipPositionForRect({
+  targetRect,
+  touchRect = { x: 0, y: 0, width: 0, height: 0 },
+  tooltip,
+  displayElement
+}) {
+  const newPosition = {
+    x: targetRect.right,
+    y: targetRect.top
+  };
+  const tooltipWidth = tooltip.offsetWidth;
+  const tooltipHeight = tooltip.offsetHeight;
+  const tooltipRect = {
+    ...newPosition,
+    width: tooltipWidth,
+    height: tooltipHeight
+  };
+  if (rectsIntersect(tooltipRect, touchRect)) {
+    newPosition.x = touchRect.x + touchRect.width / 2;
+    newPosition.y = touchRect.y - tooltipHeight;
+  }
+  const displayElementRect = displayElement.getBoundingClientRect();
+  if (newPosition.x + tooltipWidth > displayElementRect.right) {
+    newPosition.x = targetRect.left - tooltipWidth;
+  }
+  if (newPosition.y - tooltipHeight < displayElementRect.top) {
+    newPosition.y = targetRect.bottom;
+  }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
+  return newPosition;
+}
+export {
+  Tooltip
+};

package/dist/components/molecules/tooltip/style.module.css.js

@@ -0,0 +1,8 @@
+const tooltip = "_tooltip_11t5d_1";
+const defaultStyles = {
+  tooltip
+};
+export {
+  defaultStyles as default,
+  tooltip
+};

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

@@ -0,0 +1,3 @@
+export const ToplineResult: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;

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

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/hooks";
+import { InfoButton } from "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import { forwardRef } from "preact/compat";
+import defaultStyles from "./style.module.scss.js";
+const ToplineResult = forwardRef(
+  ({
+    name,
+    secondaryName,
+    mainNumber,
+    mainNumberSuffix,
+    secondaryNumber,
+    styles,
+    displayRow = false,
+    abbreviation,
+    onMouseOver,
+    onClick,
+    onMouseOut,
+    onInfoPress,
+    showInfoButton = false,
+    infoButtonRef
+  }, ref) => {
+    styles = mergeStyles({ ...defaultStyles }, styles);
+    const displayStyle = displayRow ? styles.displayRow : styles.displayColumn;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.toplineResult,
+        onMouseOver,
+        onClick,
+        onMouseOut,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.topRow, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles.primaryname} before-color--${abbreviation}`,
+                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: [
+              mainNumber,
+              mainNumberSuffix && /* @__PURE__ */ jsx("span", { className: styles.mainNumberSuffix, children: mainNumberSuffix })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.secondaryNumber, children: secondaryNumber })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  ToplineResult
+};

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

@@ -0,0 +1,38 @@
+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 defaultStyles = {
+  toplineResult,
+  primaryname,
+  secondaryname,
+  name,
+  displayNumbers,
+  mainNumber,
+  mainNumberSuffix,
+  secondaryNumber,
+  displayRow,
+  displayColumn,
+  topRow
+};
+export {
+  defaultStyles as default,
+  displayColumn,
+  displayNumbers,
+  displayRow,
+  mainNumber,
+  mainNumberSuffix,
+  name,
+  primaryname,
+  secondaryNumber,
+  secondaryname,
+  topRow,
+  toplineResult
+};

package/dist/components/organisms/coalitions-tracker/index.d.ts

@@ -0,0 +1,16 @@
+export function CoalitionsTracker({ coalitions, threshold, barChartHeight, listMembersAccessor, listMemberTotalAccessor, listDescriptionAccessor, abbreviationAccessor, thresholdTextBold, thresholdText, styles, labelOverlapConfig, }: {
+    coalitions: any;
+    threshold: any;
+    barChartHeight?: number;
+    listMembersAccessor?: string;
+    listMemberTotalAccessor?: string;
+    listDescriptionAccessor?: string;
+    abbreviationAccessor?: string;
+    thresholdTextBold: any;
+    thresholdText: any;
+    styles: any;
+    labelOverlapConfig?: {
+        labelSize: number;
+        moveBothLabels: boolean;
+    };
+}): import("preact").JSX.Element;

package/dist/components/organisms/coalitions-tracker/index.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "preact/hooks";
+import { useWindowSize } from "../../../shared/hooks/useWindowSize.js";
+import { LabelOverlapConfig, StackedBar, LabelType } from "../../particles/stacked-bar/index.js";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function CoalitionsTracker({
+  coalitions,
+  threshold,
+  barChartHeight = 32,
+  listMembersAccessor = "parties",
+  listMemberTotalAccessor = "totalSeats",
+  listDescriptionAccessor = "description",
+  abbreviationAccessor = "abbreviation",
+  thresholdTextBold,
+  thresholdText,
+  styles,
+  labelOverlapConfig = LabelOverlapConfig
+}) {
+  const wrapperRef = useRef(null);
+  const thresholdTextRef = useRef(null);
+  const [width, setWidth] = useState(0);
+  const biggestListTotal = Math.max(
+    ...coalitions.map(
+      (l) => l[listMembersAccessor].reduce(
+        (acc, cur) => acc + cur[listMemberTotalAccessor],
+        0
+      )
+    )
+  );
+  const windowSize = useWindowSize();
+  const thresholdTextMinWidth = windowSize.width < 740 ? 66 : 150;
+  const thresholdDotWidth = 11;
+  const thresholdTextPaddingLeft = 5;
+  const maxBarWidth = width - thresholdTextMinWidth - (thresholdDotWidth - 1) / 2 - thresholdTextPaddingLeft;
+  const thresholdLeft = threshold / biggestListTotal * maxBarWidth;
+  const parsedLists = coalitions.map((coalition) => {
+    const listTotal = coalition[listMembersAccessor].reduce(
+      (acc, cur) => acc + cur[listMemberTotalAccessor],
+      0
+    );
+    return {
+      title: coalition["name"],
+      description: coalition[listDescriptionAccessor],
+      height: barChartHeight,
+      width: listTotal / biggestListTotal * maxBarWidth,
+      stack: coalition[listMembersAccessor].map((m) => {
+        const listTotal2 = coalition[listMembersAccessor].reduce(
+          (acc, cur) => acc + cur[listMemberTotalAccessor],
+          0
+        );
+        return {
+          label: m[listMemberTotalAccessor],
+          fraction: m[listMemberTotalAccessor] / listTotal2,
+          abbreviation: m[abbreviationAccessor]
+        };
+      }).sort((a, b) => b.fraction - a.fraction)
+    };
+  });
+  styles = mergeStyles(defaultStyles, styles);
+  useLayoutEffect(() => {
+    const newWidth = wrapperRef.current.getBoundingClientRect().width;
+    setWidth(newWidth);
+  }, [windowSize]);
+  const renderCoalition = (list, index) => {
+    if (list.width <= 0) {
+      return;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.coalition,
+        style: { position: "relative", zIndex: 2 },
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: styles.title, children: list.title }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: styles.description,
+              style: { maxWidth: thresholdLeft <= 620 ? thresholdLeft - 8 : 620 },
+              children: list.description
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StackedBar,
+            {
+              labelOverlapConfig,
+              labelType: LabelType.hanging,
+              stack: list.stack,
+              width: list.width,
+              height: barChartHeight,
+              createSVG: true,
+              styles
+            }
+          )
+        ]
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: styles.coalitionsWrapper, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.coalitionsContainer, children: parsedLists.map(renderCoalition) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.thresholdDot,
+        style: {
+          position: "absolute",
+          height: thresholdDotWidth,
+          width: thresholdDotWidth,
+          top: 0,
+          left: 0.5 + thresholdLeft - thresholdDotWidth / 2
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.thresholdLine,
+        style: {
+          position: "absolute",
+          height: "100%",
+          width: 1,
+          top: 0,
+          left: thresholdLeft
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: thresholdTextRef,
+        className: styles.thresholdText,
+        style: {
+          position: "absolute",
+          minWidth: thresholdTextMinWidth,
+          width: "auto",
+          top: -(thresholdDotWidth + 1) / 2,
+          left: thresholdLeft + (thresholdDotWidth - 1) / 2 + thresholdTextPaddingLeft
+        },
+        children: [
+          thresholdTextBold && /* @__PURE__ */ jsx("span", { className: styles.thresholdTextBold, children: thresholdTextBold }),
+          thresholdText && /* @__PURE__ */ jsx("span", { children: thresholdText })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CoalitionsTracker
+};

package/dist/components/organisms/coalitions-tracker/style.module.scss.js

@@ -0,0 +1,32 @@
+const coalitionsWrapper = "_coalitionsWrapper_4egbd_9";
+const coalitionsContainer = "_coalitionsContainer_4egbd_14";
+const coalition = "_coalition_4egbd_9";
+const title = "_title_4egbd_27";
+const description = "_description_4egbd_28";
+const thresholdText = "_thresholdText_4egbd_43";
+const thresholdTextBold = "_thresholdTextBold_4egbd_54";
+const thresholdDot = "_thresholdDot_4egbd_61";
+const thresholdLine = "_thresholdLine_4egbd_62";
+const defaultStyles = {
+  coalitionsWrapper,
+  coalitionsContainer,
+  coalition,
+  title,
+  description,
+  thresholdText,
+  thresholdTextBold,
+  thresholdDot,
+  thresholdLine
+};
+export {
+  coalition,
+  coalitionsContainer,
+  coalitionsWrapper,
+  defaultStyles as default,
+  description,
+  thresholdDot,
+  thresholdLine,
+  thresholdText,
+  thresholdTextBold,
+  title
+};

package/dist/components/organisms/index.d.ts

@@ -0,0 +1,2 @@
+export * from './coalitions-tracker';
+export * from './ticker';

package/dist/components/organisms/ticker/gradient/index.d.ts

@@ -0,0 +1 @@
+export function Gradient(): import("preact").JSX.Element;

package/dist/components/organisms/ticker/gradient/index.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import styles from "./style.module.scss.js";
+function Gradient() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("g", { className: styles.gradient, children: /* @__PURE__ */ jsx("rect", { fill: "url(#paint0_linear_3798_6653)" }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_3798_6653",
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { className: styles.firstStop }),
+              /* @__PURE__ */ jsx("stop", { className: styles.lastStop, offset: "1" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Gradient
+};