@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc3

package/dist/components/molecules/page-section/index.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { forwardRef } from "preact/compat";
+import { useState, useRef, useLayoutEffect } from "preact/hooks";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.scss.js";
+const SectionLayout = {
+  default: "default",
+  fullWidth: "fullWidth"
+};
+const PageSection = forwardRef(
+  ({
+    id,
+    children,
+    layout = SectionLayout.default,
+    styles,
+    borderTop = false,
+    backgroundColor = "transparent"
+  }, ref) => {
+    styles = mergeStyles({ ...defaultStyles }, styles);
+    const [minHeight, setMinHeight] = useState("auto");
+    const headerRef = useRef();
+    useLayoutEffect(() => {
+      const headerElement = headerRef.current;
+      setMinHeight(headerElement.offsetHeight);
+    }, [children]);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        id,
+        ref,
+        className: [styles.section, styles[layout]].join(" "),
+        style: { "--background-color": backgroundColor, minHeight },
+        children: [
+          borderTop && /* @__PURE__ */ jsx("div", { className: styles.borderTop }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: [styles.header, styles[layout]].join(" "),
+              ref: headerRef,
+              children: children.header
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: [styles.content, styles[layout]].join(" "), children: children.content })
+        ]
+      }
+    );
+  }
+);
+export {
+  PageSection,
+  SectionLayout
+};

package/dist/components/molecules/page-section/style.module.scss.js

@@ -0,0 +1,20 @@
+const borderTop = "_borderTop_1xpz0_9";
+const section = "_section_1xpz0_39";
+const fullWidth = "_fullWidth_1xpz0_39";
+const header = "_header_1xpz0_150";
+const content = "_content_1xpz0_187";
+const defaultStyles = {
+  borderTop,
+  section,
+  fullWidth,
+  header,
+  content
+};
+export {
+  borderTop,
+  content,
+  defaultStyles as default,
+  fullWidth,
+  header,
+  section
+};

package/dist/components/molecules/party-profile/index.d.ts

@@ -0,0 +1,10 @@
+export function PartyProfile({ title, subtitle, subtitleStyle, blurb, footnote, imgSrc, imgAltText, styles, }: {
+    title: any;
+    subtitle: any;
+    subtitleStyle?: string;
+    blurb: any;
+    footnote: any;
+    imgSrc: any;
+    imgAltText: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/party-profile/index.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const SubtitleStyle = {
+  small: "small",
+  large: "large"
+};
+const PartyProfile = ({
+  title,
+  subtitle,
+  subtitleStyle = SubtitleStyle.large,
+  blurb,
+  footnote,
+  imgSrc,
+  imgAltText,
+  styles
+}) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("img", { src: imgSrc, className: styles.img, alt: imgAltText }),
+    /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
+    /* @__PURE__ */ jsx("div", { className: [styles.subtitle, styles[subtitleStyle]].join(" "), children: subtitle }),
+    /* @__PURE__ */ jsx("div", { className: styles.blurb, children: blurb }),
+    /* @__PURE__ */ jsx("div", { className: styles.footnote, children: footnote })
+  ] });
+};
+export {
+  PartyProfile
+};

package/dist/components/molecules/party-profile/style.module.css.js

@@ -0,0 +1,26 @@
+const container = "_container_hbk39_1";
+const img = "_img_hbk39_5";
+const title = "_title_hbk39_13";
+const subtitle = "_subtitle_hbk39_29";
+const small = "_small_hbk39_39";
+const blurb = "_blurb_hbk39_49";
+const footnote = "_footnote_hbk39_57";
+const defaultStyles = {
+  container,
+  img,
+  title,
+  subtitle,
+  small,
+  blurb,
+  footnote
+};
+export {
+  blurb,
+  container,
+  defaultStyles as default,
+  footnote,
+  img,
+  small,
+  subtitle,
+  title
+};

package/dist/components/molecules/refresh-indicator/index.d.ts

@@ -0,0 +1,4 @@
+export function RefreshIndicator({ text, styles }: {
+    text: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/refresh-indicator/index.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/hooks";
+import "../../particles/info-button/index.js";
+import { CircleIcon } from "../../particles/circle-icon/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.scss.js";
+function RefreshIndicator({ text, styles }) {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.refreshIndicator, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(CircleIcon, { pulse: true }) }),
+    /* @__PURE__ */ jsx("span", { className: styles.liveText, children: "LIVE" }),
+    /* @__PURE__ */ jsx("span", { className: styles.refreshText, children: text })
+  ] });
+}
+export {
+  RefreshIndicator
+};

package/dist/components/molecules/refresh-indicator/style.module.scss.js

@@ -0,0 +1,17 @@
+const refreshIndicator = "_refreshIndicator_3z0ji_9";
+const icon = "_icon_3z0ji_17";
+const liveText = "_liveText_3z0ji_26";
+const refreshText = "_refreshText_3z0ji_27";
+const defaultStyles = {
+  refreshIndicator,
+  icon,
+  liveText,
+  refreshText
+};
+export {
+  defaultStyles as default,
+  icon,
+  liveText,
+  refreshIndicator,
+  refreshText
+};

package/dist/components/molecules/responsive-grid/index.d.ts

@@ -0,0 +1,10 @@
+export function ResponsiveGrid({ type, children, styles }: {
+    type?: string;
+    children: any;
+    styles: any;
+}): import("preact").JSX.Element;
+export namespace GridType {
+    let small: string;
+    let medium: string;
+    let large: string;
+}

package/dist/components/molecules/responsive-grid/index.js

@@ -0,0 +1,19 @@
+import { jsx } from "preact/jsx-runtime";
+import { toChildArray } from "preact";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const GridType = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+function ResponsiveGrid({ type = GridType.medium, children, styles }) {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  return /* @__PURE__ */ jsx("div", { className: styles.grid, "data-grid-type": type, children: toChildArray(children).map((child, index) => {
+    return /* @__PURE__ */ jsx("div", { className: styles.gridItem, children: child }, index);
+  }) });
+}
+export {
+  GridType,
+  ResponsiveGrid
+};

package/dist/components/molecules/responsive-grid/style.module.scss.js

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

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

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

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

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import "preact/hooks";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/compat";
+import { ControlChange } from "../control-change/index.js";
+import "../topline-result/index.js";
+import "../page-section/index.js";
+import "d3-scale";
+import "../../particles/info-button/index.js";
+import { RelativeTimeSentence } from "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.css.js";
+import "preact";
+import "preact-transitioning";
+import "../svg-map/index.js";
+import "../canvas-map/Map.js";
+import "d3-geo";
+import "../canvas-map/lib/projection/index.js";
+import "rbush";
+import "rbush-knn";
+import "../canvas-map/context/MapContext.js";
+function ResultSummary({
+  previous,
+  next,
+  title,
+  text,
+  timestamp,
+  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 })
+  ] });
+}
+export {
+  ResultSummary
+};

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

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

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

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,164 @@
+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

@@ -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;