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

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

@@ -1,11 +0,0 @@
-const container = "_container_azu4a_1";
-const paragraph = "_paragraph_azu4a_12";
-const defaultStyles = {
-  container,
-  paragraph
-};
-export {
-  container,
-  defaultStyles as default,
-  paragraph
-};

package/dist/components/molecules/search-input/icons/search.d.ts

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

package/dist/components/molecules/search-input/icons/search.js

@@ -1,24 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-import styles from "./search.module.css.js";
-function SearchIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 20 20",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: styles.svg,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: styles.path,
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M7.273 0c4.022 0 7.25 3.295 7.25 7.273a7.226 7.226 0 01-7.25 7.25C3.25 14.523 0 11.295 0 7.273 0 3.295 3.25 0 7.273 0zm0 1.84A5.403 5.403 0 001.84 7.274c0 3 2.409 5.454 5.432 5.454 3 0 5.454-2.454 5.454-5.454 0-3.023-2.454-5.432-5.454-5.432zM20 18.16l-5.432-5.432h-.932l-.909.91v.931L18.16 20 20 18.159z"
-        }
-      )
-    }
-  );
-}
-export {
-  SearchIcon
-};

package/dist/components/molecules/search-input/icons/search.module.css.js

@@ -1,11 +0,0 @@
-const svg = "_svg_1dms8_1";
-const path = "_path_1dms8_8";
-const styles = {
-  svg,
-  path
-};
-export {
-  styles as default,
-  path,
-  svg
-};

package/dist/components/molecules/search-input/index.d.ts

@@ -1,11 +0,0 @@
-export function SearchInput({ placeholder, inputValue, maxSuggestions, onInputChange, onSubmit, onSelect, onClear, onFocus, styles, }: {
-    placeholder: any;
-    inputValue: any;
-    maxSuggestions?: number;
-    onInputChange: any;
-    onSubmit: any;
-    onSelect: any;
-    onClear: any;
-    onFocus: any;
-    styles: any;
-}): import("preact").JSX.Element;

package/dist/components/molecules/search-input/index.js

@@ -1,164 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import { useRef, useState } from "preact/hooks";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-import { SearchIcon } from "./icons/search.js";
-import "../../particles/info-button/index.js";
-import "../../particles/relative-time-sentence/index.js";
-import { CloseButton } from "../../particles/close-button/index.js";
-import defaultStyles from "./style.module.css.js";
-function SearchInput({
-  placeholder,
-  inputValue,
-  maxSuggestions = 5,
-  onInputChange,
-  onSubmit,
-  onSelect,
-  onClear,
-  onFocus,
-  styles
-}) {
-  var _a, _b, _c;
-  styles = mergeStyles(defaultStyles, styles);
-  const inputRef = useRef(null);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [suggestions, setSuggestions] = useState();
-  const [showSuggestions, setShowSuggestions] = useState(true);
-  async function updateSelectedIndex(diff) {
-    setSelectedIndex((currentIndex) => {
-      const newIndex = Math.max(
-        Math.min(currentIndex + diff, suggestions.length - 1),
-        -1
-      );
-      if (newIndex >= 0 && suggestions[newIndex].disabled) {
-        return currentIndex;
-      }
-      return newIndex;
-    });
-  }
-  async function onKeyDown(event) {
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      updateSelectedIndex(1);
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      updateSelectedIndex(-1);
-    } else if (event.key === "Enter" && selectedIndex >= 0) {
-      event.preventDefault();
-      onSelectSuggestion(suggestions[selectedIndex]);
-    } else if (event.key === "Enter") {
-      event.preventDefault();
-      if (onSubmit) {
-        const shouldBlur = await onSubmit(inputRef.current.value);
-        if (shouldBlur) {
-          inputRef.current.blur();
-        }
-      }
-    } else if (event.key === "Escape") {
-      inputRef.current.blur();
-    }
-  }
-  async function inputChanged(input) {
-    let suggestions2 = await onInputChange(input);
-    if (suggestions2) {
-      suggestions2 = suggestions2.slice(0, maxSuggestions);
-    }
-    setSuggestions(suggestions2);
-    setSelectedIndex(-1);
-  }
-  function onSelectSuggestion(suggestion) {
-    onSelect(suggestion);
-    inputRef.current.value = suggestion.text;
-    inputRef.current.blur();
-  }
-  const showClearButton = ((_a = inputRef.current) == null ? void 0 : _a.value) && ((_b = inputRef.current) == null ? void 0 : _b.value) !== "" || inputValue && inputValue !== "";
-  return /* @__PURE__ */ jsxs("div", { className: styles.searchContainer, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        name: "search",
-        placeholder,
-        ref: inputRef,
-        type: "text",
-        "aria-label": "Search input",
-        value: inputValue,
-        onKeyDown,
-        onInput: (e) => {
-          inputChanged(e.target.value);
-        },
-        onBlur: () => {
-          setShowSuggestions(false);
-        },
-        onFocus: (e) => {
-          e.target.select();
-          setShowSuggestions(true);
-          onFocus && onFocus(e);
-        },
-        className: styles.input
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: styles.searchIcon, children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-    showClearButton && /* @__PURE__ */ jsx("div", { className: styles.clearButton, children: /* @__PURE__ */ jsx(
-      CloseButton,
-      {
-        border: false,
-        onClick: () => {
-          const emptyValue = "";
-          inputRef.current.value = emptyValue;
-          inputChanged(emptyValue);
-          inputRef.current.focus();
-          onClear();
-        }
-      }
-    ) }),
-    showSuggestions && /* @__PURE__ */ jsx(
-      SuggestionList,
-      {
-        suggestions,
-        highlightText: (_c = inputRef.current) == null ? void 0 : _c.value,
-        selectedIndex,
-        styles,
-        onMouseOver: (_, index) => setSelectedIndex(index),
-        onSelect: onSelectSuggestion
-      }
-    )
-  ] });
-}
-function SuggestionList({
-  suggestions,
-  highlightText,
-  selectedIndex,
-  styles,
-  onMouseOver,
-  onSelect
-}) {
-  if (!suggestions || suggestions.length === 0) return;
-  return /* @__PURE__ */ jsx("ul", { className: styles.suggestions, "aria-label": "Search suggestions", children: suggestions.map((d, index) => {
-    const shouldHighlight = !d.disabled;
-    return /* @__PURE__ */ jsxs(
-      "li",
-      {
-        "aria-label": d.text,
-        className: [
-          styles.suggestion,
-          index === selectedIndex && styles.selected,
-          d.disabled && styles.disabled
-        ].join(" "),
-        onMouseDown: (e) => e.preventDefault(),
-        onMouseOver: () => onMouseOver(d, index),
-        onClick: () => {
-          onSelect(d);
-        },
-        children: [
-          shouldHighlight && d.text.split(new RegExp(`(${highlightText})`, "ig")).map(
-            (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsx("span", { className: styles.highlighted, children: part }, i) : part
-          ),
-          !shouldHighlight && d.text
-        ]
-      },
-      index
-    );
-  }) });
-}
-export {
-  SearchInput
-};

package/dist/components/molecules/search-input/style.module.css.js

@@ -1,32 +0,0 @@
-const searchContainer = "_searchContainer_1kj0x_1";
-const input = "_input_1kj0x_5";
-const searchIcon = "_searchIcon_1kj0x_27";
-const clearButton = "_clearButton_1kj0x_36";
-const suggestions = "_suggestions_1kj0x_42";
-const suggestion = "_suggestion_1kj0x_42";
-const disabled = "_disabled_1kj0x_68";
-const selected = "_selected_1kj0x_73";
-const highlighted = "_highlighted_1kj0x_77";
-const defaultStyles = {
-  searchContainer,
-  input,
-  searchIcon,
-  clearButton,
-  suggestions,
-  suggestion,
-  disabled,
-  selected,
-  highlighted
-};
-export {
-  clearButton,
-  defaultStyles as default,
-  disabled,
-  highlighted,
-  input,
-  searchContainer,
-  searchIcon,
-  selected,
-  suggestion,
-  suggestions
-};

package/dist/components/molecules/slope-chart/index.d.ts

@@ -1,16 +0,0 @@
-export function SlopeChart({ domain, lines, y1Label, y2Label, axis, styles, padding, svgId, }: {
-    domain: any;
-    lines: any;
-    y1Label?: (d: any) => any;
-    y2Label?: (d: any) => any;
-    axis: any;
-    styles: any;
-    padding?: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-    };
-    svgId: any;
-}): import("preact").JSX.Element;
-export default SlopeChart;

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

@@ -1,139 +0,0 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
-import { useRef, useMemo } from "preact/hooks";
-import { positionLabels, scaleLinear } from "../../../shared/helpers/labelsUtil.js";
-import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
-import defaultStyles from "./style.module.css.js";
-import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-const SlopeChart = ({
-  domain,
-  lines,
-  y1Label = (d) => d.y1,
-  y2Label = (d) => d.y2,
-  axis,
-  styles,
-  padding = { left: 24, right: 24, top: 20, bottom: 20 },
-  svgId
-}) => {
-  const wrapperRef = useRef(null);
-  const containerSize = useContainerSize(wrapperRef);
-  const width = containerSize ? containerSize.width : 0;
-  const contentWidth = Math.floor(width - padding.left - padding.right);
-  const contentHeight = contentWidth;
-  const height = contentHeight + padding.top + padding.bottom;
-  const yScale = scaleLinear(domain, [contentHeight, 0]);
-  const show = width > 0;
-  const y1Labels = useMemo(() => {
-    let labels = lines.map((d) => ({ y: yScale(d.y1), value: y1Label(d) }));
-    return positionLabels(labels);
-  }, [lines, y1Label, yScale]);
-  const y2Labels = useMemo(() => {
-    let labels = lines.map((d) => ({ y: yScale(d.y2), value: y2Label(d) }));
-    return positionLabels(labels);
-  }, [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__ */ jsxs("g", { transform: `translate(0 ${contentHeight})`, children: [
-      /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: 0,
-          x2: contentWidth,
-          className: styles.axis,
-          shapeRendering: "crispEdges"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          dominantBaseline: "hanging",
-          className: [styles.label, styles.axisLabel].join(" "),
-          children: axis.startLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: contentWidth,
-          dominantBaseline: "hanging",
-          textAnchor: "end",
-          className: [styles.label, styles.axisLabel].join(" "),
-          children: axis.endLabel
-        }
-      )
-    ] }),
-    lines.map((line, index) => {
-      const itemStyles = mergeStyles({ ...styles }, line.styles);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            y1: yScale(line.y1),
-            x2: contentWidth,
-            y2: yScale(line.y2),
-            className: `${itemStyles.lineWhite}`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            y1: yScale(line.y1),
-            x2: contentWidth,
-            y2: yScale(line.y2),
-            className: `${itemStyles.line} stroke-color--${line.abbreviation}`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: 0,
-            cy: yScale(line.y1),
-            r: 4,
-            className: `${itemStyles.circle} fill-color--${line.abbreviation}`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: contentWidth,
-            cy: yScale(line.y2),
-            r: 4,
-            className: `${itemStyles.circle} fill-color--${line.abbreviation}`
-          }
-        )
-      ] }, index);
-    }),
-    y1Labels.map((label, index) => {
-      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: 0,
-          y: label.y,
-          className: [styles.label, styles.y1Label].join(" "),
-          textAnchor: "end",
-          dominantBaseline: "middle",
-          children: label.value
-        }
-      ) }, index);
-    }),
-    y2Labels.map((label, index) => {
-      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: contentWidth,
-          y: label.y,
-          className: [styles.label, styles.y2Label].join(" "),
-          textAnchor: "start",
-          dominantBaseline: "middle",
-          children: label.value
-        }
-      ) }, index);
-    })
-  ] }) });
-  return /* @__PURE__ */ jsx("div", { className: styles.slopeChartContainer, ref: wrapperRef, children: show && chart });
-};
-export {
-  SlopeChart,
-  SlopeChart as default
-};

package/dist/components/molecules/slope-chart/style.module.css.js

@@ -1,35 +0,0 @@
-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 defaultStyles = {
-  slopeChartContainer,
-  svg,
-  line,
-  lineWhite,
-  circle,
-  label,
-  y1Label,
-  y2Label,
-  axis,
-  axisLabel
-};
-export {
-  axis,
-  axisLabel,
-  circle,
-  defaultStyles as default,
-  label,
-  line,
-  lineWhite,
-  slopeChartContainer,
-  svg,
-  y1Label,
-  y2Label
-};

package/dist/components/molecules/svg-map/context/MapContext.d.ts

@@ -1 +0,0 @@
-export const MapContext: import('preact').Context<any>;

package/dist/components/molecules/svg-map/context/MapContext.js

@@ -1,5 +0,0 @@
-import { createContext } from "preact";
-const MapContext = createContext();
-export {
-  MapContext
-};

package/dist/components/molecules/svg-map/context/SVGMapProvider.d.ts

@@ -1,10 +0,0 @@
-export function SVGMapProvider({ id, mapRef, width, height, padding, config, selectedFeature, children, }: {
-    id: any;
-    mapRef: any;
-    width: any;
-    height: any;
-    padding: any;
-    config: any;
-    selectedFeature: any;
-    children: any;
-}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/context/SVGMapProvider.js

@@ -1,88 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-import { useMemo, useRef, useCallback } from "preact/hooks";
-import { geoPath } from "d3-geo";
-import { bboxFeature } from "../helpers/bboxFeature.js";
-import { MapContext } from "./MapContext.js";
-function SVGMapProvider({
-  id,
-  mapRef,
-  width,
-  height,
-  padding,
-  config,
-  selectedFeature,
-  children
-}) {
-  const contentSize = useMemo(
-    () => ({
-      width: width - padding.left - padding.right,
-      height: height - padding.top - padding.bottom
-    }),
-    [width, height, padding]
-  );
-  const projection = useMemo(() => {
-    return config.projection.fitSize(
-      [contentSize.width, contentSize.height],
-      bboxFeature(config.bounds)
-    );
-  }, [contentSize, config]);
-  const path = geoPath().projection(projection);
-  const layerSet = useRef(/* @__PURE__ */ new Set());
-  const layers = useRef([]);
-  const updateLayers = useCallback((layerSet2) => {
-    const _layers = Array.from(layerSet2.current);
-    _layers.sort((a, b) => {
-      return b.zIndex - a.zIndex;
-    });
-    layers.current = _layers;
-  }, []);
-  const registerLayer = useCallback(
-    (layer) => {
-      layerSet.current.add(layer);
-      updateLayers(layerSet);
-    },
-    [updateLayers]
-  );
-  const unregisterLayer = useCallback(
-    (layer) => {
-      layerSet.current.delete(layer);
-      updateLayers(layerSet);
-    },
-    [updateLayers]
-  );
-  const findFeatureAtPoint = useCallback(
-    ({ x, y }) => {
-      const adjustedPoint = [x - padding.left, y - padding.top];
-      for (const layer of layers.current) {
-        if (typeof layer.findFeatureAtPoint === "function") {
-          const feature = layer.findFeatureAtPoint(adjustedPoint);
-          if (feature) return feature;
-        }
-      }
-      return null;
-    },
-    [padding]
-  );
-  const context = {
-    id,
-    projection,
-    config,
-    path,
-    size: { width, height },
-    contentSize,
-    padding,
-    extent: [
-      [0, 0],
-      [width, height]
-    ],
-    selectedFeature,
-    registerLayer,
-    unregisterLayer,
-    findFeatureAtPoint
-  };
-  mapRef.current = context;
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: context, children });
-}
-export {
-  SVGMapProvider
-};

package/dist/components/molecules/svg-map/helpers/bboxFeature.d.ts

@@ -1,8 +0,0 @@
-export function bboxFeature(bounds: any): {
-    type: string;
-    properties: {};
-    geometry: {
-        coordinates: any[][][];
-        type: string;
-    };
-};

package/dist/components/molecules/svg-map/helpers/bboxFeature.js

@@ -1,26 +0,0 @@
-function bboxFeature(bounds) {
-  const minLon = bounds[0][0];
-  const minLat = bounds[0][1];
-  const maxLon = bounds[1][0];
-  const maxLat = bounds[1][1];
-  const feature = {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      coordinates: [
-        [
-          [minLon, maxLat],
-          [maxLon, maxLat],
-          [maxLon, minLat],
-          [minLon, minLat],
-          [minLon, maxLat]
-        ]
-      ],
-      type: "Polygon"
-    }
-  };
-  return feature;
-}
-export {
-  bboxFeature
-};

package/dist/components/molecules/svg-map/helpers/dynamicPropValue.d.ts

@@ -1 +0,0 @@
-export function dynamicPropValue(prop: any, d: any, index: any): any;

package/dist/components/molecules/svg-map/helpers/dynamicPropValue.js

@@ -1,9 +0,0 @@
-function dynamicPropValue(prop, d, index) {
-  if (typeof prop === "function") {
-    return prop(d, index);
-  }
-  return prop;
-}
-export {
-  dynamicPropValue
-};

package/dist/components/molecules/svg-map/helpers/geoMath.d.ts

@@ -1,4 +0,0 @@
-export function calculateScale(mapBounds: any, mapWidthPixels: any, mapHeightPixels: any): number;
-export function circleContainsCoordinates(circleCoordinates: any, radius: any, coordinates: any): boolean;
-export function distanceInKmBetweenEarthCoordinates(point1: any, point2: any): number;
-export function degreesToRadians(degrees: any): number;

package/dist/components/molecules/svg-map/helpers/saveSVG.d.ts

@@ -1 +0,0 @@
-export function saveSVG(elementId: any): void;

package/dist/components/molecules/svg-map/hooks/useThrowIfNonLayerChildren.d.ts

@@ -1,4 +0,0 @@
-/**
- * Throws an error if any child component in `children` is not a valid layer (Polygon, Line, etc)
- */
-export function useThrowIfNonLayerChildren(children: any): void;

package/dist/components/molecules/svg-map/hooks/useThrowIfNonLayerChildren.js

@@ -1,19 +0,0 @@
-import { useEffect } from "preact/hooks";
-import { toChildArray } from "preact";
-import * as index from "../layers/index.js";
-const layerTypes = Object.values(index);
-function useThrowIfNonLayerChildren(children) {
-  useEffect(() => {
-    const firstNonLayerChild = toChildArray(children).find(
-      (child) => !layerTypes.includes(child.type)
-    );
-    if (firstNonLayerChild) {
-      throw Error(
-        `unknown component type passed as child to SVGMap component: ${firstNonLayerChild.type}`
-      );
-    }
-  }, [children]);
-}
-export {
-  useThrowIfNonLayerChildren
-};