@guardian/interactive-component-library 0.2.0-rc4 → 0.3.0

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

@@ -1,128 +0,0 @@
-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

@@ -1,82 +0,0 @@
-/**
- * @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

@@ -1,117 +0,0 @@
-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

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

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

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

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

@@ -1,61 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

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

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

@@ -1,35 +0,0 @@
-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
-};