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

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

@@ -0,0 +1,50 @@
+const container = "_container_6u92g_1";
+const button = "_button_6u92g_5";
+const icon = "_icon_6u92g_22";
+const title = "_title_6u92g_27";
+const clearFix = "_clearFix_6u92g_34";
+const popout = "_popout_6u92g_38";
+const hint = "_hint_6u92g_55";
+const groupHeader = "_groupHeader_6u92g_62";
+const option = "_option_6u92g_69";
+const selected = "_selected_6u92g_85";
+const optionIcon = "_optionIcon_6u92g_94";
+const optionTitle = "_optionTitle_6u92g_99";
+const optionDescription = "_optionDescription_6u92g_107";
+const checkmark = "_checkmark_6u92g_114";
+const checkmarkPath = "_checkmarkPath_6u92g_120";
+const defaultStyles = {
+  container,
+  button,
+  icon,
+  title,
+  clearFix,
+  popout,
+  hint,
+  groupHeader,
+  option,
+  selected,
+  optionIcon,
+  optionTitle,
+  optionDescription,
+  checkmark,
+  checkmarkPath
+};
+export {
+  button,
+  checkmark,
+  checkmarkPath,
+  clearFix,
+  container,
+  defaultStyles as default,
+  groupHeader,
+  hint,
+  icon,
+  option,
+  optionDescription,
+  optionIcon,
+  optionTitle,
+  popout,
+  selected,
+  title
+};

package/dist/components/molecules/first-past-the-post-waffle/index.d.ts

@@ -0,0 +1,5 @@
+export function FirstPastThePostWaffle({ styles, children, lineOverHang }: {
+    styles: any;
+    children: any;
+    lineOverHang: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/first-past-the-post-waffle/index.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const FirstPastThePostWaffle = ({ styles, children, lineOverHang }) => {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsx("p", { style: { height: lineOverHang + 20 }, className: styles.halfLineText, children: children.halfLineText }),
+    /* @__PURE__ */ jsx("div", { className: styles.line, children: " " }),
+    children.waffle
+  ] });
+};
+export {
+  FirstPastThePostWaffle
+};

package/dist/components/molecules/first-past-the-post-waffle/style.module.css.js

@@ -0,0 +1,14 @@
+const wrapper = "_wrapper_kh25l_1";
+const line = "_line_kh25l_5";
+const halfLineText = "_halfLineText_kh25l_15";
+const defaultStyles = {
+  wrapper,
+  line,
+  halfLineText
+};
+export {
+  defaultStyles as default,
+  halfLineText,
+  line,
+  wrapper
+};

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

@@ -0,0 +1,18 @@
+export * from './table';
+export * from './slope-chart';
+export * from './tooltip';
+export * from './control-change';
+export * from './first-past-the-post-waffle';
+export * from './topline-result';
+export * from './page-section';
+export * from './column-chart';
+export * from './party-profile';
+export * from './result-summary';
+export * from './search-input';
+export * from './refresh-indicator';
+export * from './responsive-grid';
+export * from './modal';
+export * from './dropdown';
+export * from './svg-map';
+export * from './canvas-map';
+export * from './option-picker';

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

@@ -0,0 +1,8 @@
+export function Modal({ visible, blurBackground, alwaysMounted, styles, children, onClickOutside, }: {
+    visible?: boolean;
+    blurBackground?: boolean;
+    alwaysMounted?: boolean;
+    styles: any;
+    children: any;
+    onClickOutside: any;
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,59 @@
+import { jsx } from "preact/jsx-runtime";
+import { useRef, useCallback, useEffect } from "preact/hooks";
+import { CSSTransition } from "preact-transitioning";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function Modal({
+  visible = false,
+  blurBackground = true,
+  alwaysMounted = false,
+  styles,
+  children,
+  onClickOutside
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  const modalBoxRef = useRef();
+  const onClick = useCallback(
+    (event) => {
+      if (!modalBoxRef.current.contains(event.target)) {
+        if (onClickOutside && visible) onClickOutside(event);
+      }
+    },
+    [onClickOutside, visible]
+  );
+  useEffect(() => {
+    if (visible) {
+      window.addEventListener("scroll", onClick, { once: true });
+    }
+    return () => {
+      if (visible) {
+        window.removeEventListener("scroll", onClick);
+      }
+    };
+  }, [onClick, visible]);
+  if (typeof document === "undefined") return;
+  return /* @__PURE__ */ jsx(
+    CSSTransition,
+    {
+      in: visible,
+      duration: 300,
+      classNames: styles,
+      alwaysMounted,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [
+            styles.transitionContainer,
+            blurBackground && styles.blur,
+            visible && styles.visible
+          ].join(" "),
+          onClick,
+          children: /* @__PURE__ */ jsx("div", { ref: modalBoxRef, className: styles.modalBox, children })
+        }
+      )
+    }
+  );
+}
+export {
+  Modal
+};

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

@@ -0,0 +1,26 @@
+const transitionContainer = "_transitionContainer_11twd_1";
+const blur = "_blur_11twd_11";
+const modalBox = "_modalBox_11twd_16";
+const enter = "_enter_11twd_25";
+const exitDone = "_exitDone_11twd_26";
+const enterActive = "_enterActive_11twd_37";
+const exit = "_exit_11twd_26";
+const defaultStyles = {
+  transitionContainer,
+  blur,
+  modalBox,
+  enter,
+  exitDone,
+  enterActive,
+  exit
+};
+export {
+  blur,
+  defaultStyles as default,
+  enter,
+  enterActive,
+  exit,
+  exitDone,
+  modalBox,
+  transitionContainer
+};

package/dist/components/molecules/option-picker/index.d.ts

@@ -0,0 +1,26 @@
+/** @typedef { ("vertical" | "horizontal") } OptionLayoutDirection */
+/**
+ * OptionPicker component
+ *
+ * @param {Object} props
+ * @param {string} props.title
+ * @param {Array<{ title: string, description: string, icon: string | JSX.Element }>} props.options
+ * @param {OptionLayoutDirection} [props.layoutDirection="horizontal"]
+ * @param {number} [props.initialSelectedIndex=0]
+ * @param {(index: number, option: Object) => void} [props.onSelect]
+ * @param {Object} [props.styles]
+ * @returns
+ */
+export function OptionPicker({ title, options, layoutDirection, initialSelectedIndex, onSelect, styles, }: {
+    title: string;
+    options: Array<{
+        title: string;
+        description: string;
+        icon: string | JSX.Element;
+    }>;
+    layoutDirection?: OptionLayoutDirection;
+    initialSelectedIndex?: number;
+    onSelect?: (index: number, option: any) => void;
+    styles?: any;
+}): import("preact").JSX.Element;
+export type OptionLayoutDirection = ("vertical" | "horizontal");

package/dist/components/molecules/option-picker/index.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useState, useCallback } from "preact/hooks";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function OptionPicker({
+  title,
+  options,
+  layoutDirection = "horizontal",
+  initialSelectedIndex = 0,
+  onSelect,
+  styles
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  const [selectedIndex, setSelectedIndex] = useState(initialSelectedIndex);
+  const onOptionClick = useCallback(
+    (option, index) => {
+      if (index === selectedIndex) return;
+      setSelectedIndex(index);
+      if (onSelect) onSelect(index, option);
+    },
+    [selectedIndex, onSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.optionPicker, children: [
+    title && /* @__PURE__ */ jsx("span", { className: styles.title, children: title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [styles.options, layoutDirection].join(" "),
+        role: "listbox",
+        "aria-orientation": layoutDirection,
+        "aria-activedescendant": `option-${selectedIndex}`,
+        children: options.map((option, index) => {
+          const isSelected = index === selectedIndex;
+          const optionId = `option-${index}`;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: optionId,
+              className: [
+                styles.option,
+                isSelected ? styles.selected : ""
+              ].join(" "),
+              onClick: () => onOptionClick(option, index),
+              role: "option",
+              "aria-selected": isSelected,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.optionIconContainer, children: [
+                  typeof option.icon === "string" ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: option.icon,
+                      className: styles.optionIcon,
+                      role: "presentation"
+                    }
+                  ) : option.icon,
+                  isSelected && /* @__PURE__ */ jsx("div", { className: styles.checkmark, children: /* @__PURE__ */ jsx(Checkmark, {}) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.optionText, children: [
+                  /* @__PURE__ */ jsx("h4", { className: styles.optionTitle, children: option.title }),
+                  /* @__PURE__ */ jsx("p", { className: styles.optionDescription, children: option.description })
+                ] })
+              ]
+            },
+            optionId
+          );
+        })
+      }
+    )
+  ] });
+}
+function Checkmark() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "11",
+      height: "9",
+      viewBox: "0 0 11 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.631814 4.43687L0.0839844 4.9847L2.82313 8.8195H3.08335L10.9173 0.711624L10.3695 0.17749L3.08335 6.77884L0.631814 4.43687Z",
+          className: defaultStyles.checkmarkPath
+        }
+      )
+    }
+  );
+}
+export {
+  OptionPicker
+};

package/dist/components/molecules/option-picker/style.module.css.js

@@ -0,0 +1,35 @@
+const optionPicker = "_optionPicker_1b561_1";
+const title = "_title_1b561_13";
+const options = "_options_1b561_20";
+const option = "_option_1b561_1";
+const selected = "_selected_1b561_46";
+const optionIconContainer = "_optionIconContainer_1b561_55";
+const optionIcon = "_optionIcon_1b561_55";
+const optionTitle = "_optionTitle_1b561_67";
+const checkmark = "_checkmark_1b561_78";
+const checkmarkPath = "_checkmarkPath_1b561_82";
+const defaultStyles = {
+  optionPicker,
+  title,
+  options,
+  option,
+  selected,
+  optionIconContainer,
+  optionIcon,
+  optionTitle,
+  checkmark,
+  checkmarkPath
+};
+export {
+  checkmark,
+  checkmarkPath,
+  defaultStyles as default,
+  option,
+  optionIcon,
+  optionIconContainer,
+  optionPicker,
+  optionTitle,
+  options,
+  selected,
+  title
+};

package/dist/components/molecules/page-section/index.d.ts

@@ -0,0 +1,8 @@
+export namespace SectionLayout {
+    let _default: string;
+    export { _default as default };
+    export let fullWidth: string;
+}
+export const PageSection: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;

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,40 @@
+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/lib/Map.js";
+import "d3-polygon";
+import "../canvas-map/lib/projection/index.js";
+import "d3-geo";
+import "rbush";
+import "rbush-knn";
+import "../canvas-map/context/MapContext.js";
+import "../canvas-map/Map.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;