@guardian/interactive-component-library 0.3.0 → 0.3.2-rc1

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

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

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

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

@@ -0,0 +1,165 @@
+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",
+        autoComplete: "off",
+        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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/molecules/svg-map/index.d.ts

@@ -0,0 +1,38 @@
+export * as MapLayers from './layers';
+export namespace _Projection {
+    let geoAlbersUKComposite: any;
+    let geoAlbersEngland: any;
+    let geoMercator: any;
+}
+export namespace MapConfiguration {
+    namespace UKComposite {
+        import projection = _Projection.geoAlbersUKComposite;
+        export { projection };
+        export let bounds: number[][];
+        export let drawCompositionBorders: boolean;
+        export let drawToCanvas: boolean;
+    }
+    namespace England {
+        import projection_1 = _Projection.geoAlbersEngland;
+        export { projection_1 as projection };
+        let bounds_1: number[][];
+        export { bounds_1 as bounds };
+        let drawCompositionBorders_1: boolean;
+        export { drawCompositionBorders_1 as drawCompositionBorders };
+        let drawToCanvas_1: boolean;
+        export { drawToCanvas_1 as drawToCanvas };
+    }
+    namespace London {
+        let projection_2: any;
+        export { projection_2 as projection };
+        let bounds_2: number[][];
+        export { bounds_2 as bounds };
+        let drawCompositionBorders_2: boolean;
+        export { drawCompositionBorders_2 as drawCompositionBorders };
+        let drawToCanvas_2: boolean;
+        export { drawToCanvas_2 as drawToCanvas };
+    }
+}
+export const SVGMap: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;